问题: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 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
限定更严格,必须后面的元素只比前面的低一个级别。
http://www.w3school.com.cn/css/css_selector_child.asp
子代选择器和后代选择器。
子代指下一级的DOM节点,后代可以是孙子辈的。
>是指只能一代接一代,比如: 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>