开发者社区> 问答> 正文

CSS中`nav ul li ul` 与 `nav>ul>li` 这两种写法的区别是什么

问题:CSS样式中的 nav ul li ul 与 nav>ul>li 这两种写法的区别是什么,“>”的作用是什么,谢谢。

    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }

        nav ul li ul{
            display:none;
        }

        nav>ul>li{
            float:left;
            padding:10px;
            border:1px solid blue;
        }

        nav>ul>li>ul>li{
            padding:10px;
            border-bottom:1px solid #ccc;
        }
    </style>

展开
收起
a123456678 2016-05-26 17:13:25 2738 0
1 条回答
写回答
取消 提交回答
  • <nav>
        <ul id="a">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <ul id="b">
                    <li></li><li></li>
                </ul>
            </li>
            <li>
                <ul id="c">
                    <li></li><li></li>
                </ul>
            </li>
        </ul>
    </nav>

    nav>ul只选择nav下一级里面的ul元素,例如上面dom结构里id为a的ul。
    nav ul选择nav内所包含的所有ul元素,例如上面dom结构里面id为a、b、c的全部ul。

    nav>ul比nav ul限定更严格,必须后面的元素只比前面的低一个级别。

    2019-07-17 19:16:36
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载