霍者博客

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>

>是指只能一代接一代,比如: nav>ul>li>ul>li,必须是下面这样的

            <nav>
                <ul>
                    <li>
                        <ul>
                            <li></li>
                        </ul>
                    </li>
                </ul>
            </nav>

然后nav ul li ul只要求后面的元素是在nav标签下的顺序即可,对中间隔了几层不敏感,比如:

            <nav>
                <div>
                    <ul>
                        <div>
                            <a>
                                <li>
                                    <div>
                                        <ul>
                                            <li>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </a>
                        </div>
                    </ul>
                </div>
            </nav>

nav>ul只选择nav下一级里面的ul元素,例如上面dom结构里id为a的ul。

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

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

<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>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/242.html,标题:CSS中`nav ul li ul` 与 `nav>ul>li` 这两种写法的区别是什么

【我来说两句】
分享到:

相关文章:


CSS4激动人心的新特性及浏览器支持度  (2017-3-6 7:0:0)

CSS font-weight 属性  (2017-1-25 6:8:17)

只使用CSS如何禁止选中文字,而不是JS  (2016-12-26 7:11:36)

如何设置CSS里元素垂直居中效果  (2016-12-20 6:14:14)

CSS实现多行文本溢出显示省略号  (2016-12-12 5:0:22)

CSS样式表知识点回顾  (2016-4-24 8:7:20)

CSS​样式文件命名规范  (2016-4-21 9:49:45)

word-wrap&word-break的区别  (2016-4-18 11:0:26)

CSS盒子浮动 float  (2016-4-17 10:9:14)

CSS空间定位z-index空间定位  (2016-4-17 8:20:0)


评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。