我非常清楚子元素和后代元素之间的区别。但是我在使用子元素选择器时遇到了问题。也许我没有正确理解。以下是一个三级导航菜单的示例。
<div id="nav">
<ul class="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Sub Menu Item 1</a></li>
<li><a href="#">Sub Sub Menu Item 2</a></li>
<li><a href="#">Sub Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
根据我对CSS中子元素选择器( > )的理解,以下内容是正确的:
#nav {}
#nav ul.menu {}
#nav ul.menu > li {} /* main navigation items only */
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */
#nav ul.menu > li > ul.sub-menu ul.sub-menu {} /* the 3rd tier only */
然而事实并非如此。第二层的css样式也被应用到了第三层。只有使用
!important
声明,我才能在最后一个css定义中覆盖第二层。明白了吗?
>
子选择器的奢侈品... 我仍然被困在支持 IE6 的网站上工作 :( - Niklas