我很清楚 child 和后代之间的区别。但是,我对子选择器有疑问。也许我没有正确理解某些东西。以下面的 HTML 为例。这是一个 3 层导航菜单。
<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 定义中的第二层。
有道理吗?
最佳答案
nav ul.menu > li {} /* main navigation items only */
正确
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */
错误 - 您正在选择 ul.menu
子级 li
,它有子级 ul.sub-menu
,它下面的所有 li
元素。
如果你只想将它限制在那个级别,使用这个:
#nav ul.menu > li > ul.sub-menu > li {}
最后一个
#nav ul.menu > li > ul.sub-menu ul.sub-menu {}
只要将其保持在 3 层即可正常工作。
关于CSS 子选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6307981/