css 第N级列表选择控制_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

css 第N级列表选择控制_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:23 PM

css ul li 选择列表

请教各位，关于CSS中对多层列表的选择和控制。

效果如图片。

让一级菜单横排，二三四跟着一级竖排。

每级的字体大小和颜色都不同，CSS实在是弄不好，请求帮助，挺着急的，谢谢了。

回复讨论(解决方案)

网上不是很多无限极的啊。

http://www.neoease.com/tutorials/wordpress-menubar/wordpress-menubar-5/

此类问题你以后可以分析
你的菜单其实一共只有2个级别
主菜单：横向
字菜单：纵向

主菜单可以嵌套包含子菜单
子菜单可以嵌套包含子菜单
在下去就是子菜单的层次问题只要css的嵌套声明即可有几层就嵌套声明几次

<!--To change this template, choose Tools | Templatesand open the template in the editor.--><!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <style>            .menu{ /**主菜单区域*/                list-style: none;                padding: 0;                margin: 0;            }            .menu>li{ /**主菜单 菜单项*/                display: block;                float: left;                color: red;                text-align: center;            }            .menu>li ul{            /**统一所有子菜单样式*/                list-style: none;            }            .menu>li>ul{ /**子菜单区域 1级别*/            }            .menu>li>ul>li{ /**子菜单 1级 菜单项*/                color: green;            }            .menu>li>ul>li>ul{ /**子菜单区域 2级别*/            }            .menu>li>ul>li>ul>li{ /**子菜单 2级 菜单项*/                color: blue;            }            .menu>li>ul>li>ul>li>ul{ /**子菜单区域 3级别*/            }            .menu>li>ul>li>ul>li>ul>li{ /**子菜单 3级 菜单项*/                color: #ccc;                font-size: 10px;            }            /**下面可以依照上面的类推*/        </style>    </head>    <body>        <ul class="menu">            <li>                主菜单1                <ul>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单2                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单3                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级                                <ul>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                </ul>                            </li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>        </ul>    </body></html>

<!--To change this template, choose Tools | Templatesand open the template in the editor.--><!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <style>            .menu{ /**主菜单区域*/                list-style: none;                padding: 0;                margin: 0;            }            .menu>li{ /**主菜单 菜单项*/                display: block;                float: left;                color: red;                text-align: center;            }            .menu>li ul{            /**统一所有子菜单样式*/                list-style: none;            }            .menu>li>ul{ /**子菜单区域 1级别*/            }            .menu>li>ul>li{ /**子菜单 1级 菜单项*/                color: green;            }            .menu>li>ul>li>ul{ /**子菜单区域 2级别*/            }            .menu>li>ul>li>ul>li{ /**子菜单 2级 菜单项*/                color: blue;            }            .menu>li>ul>li>ul>li>ul{ /**子菜单区域 3级别*/            }            .menu>li>ul>li>ul>li>ul>li{ /**子菜单 3级 菜单项*/                color: #ccc;                font-size: 10px;            }            /**下面可以依照上面的类推*/        </style>    </head>    <body>        <ul class="menu">            <li>                主菜单1                <ul>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单2                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单3                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级                                <ul>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                </ul>                            </li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>        </ul>    </body></html>

非常感谢，一下觉悟了，真的很感谢！

同时感谢楼上的各位。

我的问题出在

主菜单1
- 子菜单1级

，哈哈哈，真的很感谢

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract