CSS儿童选择器

我明白孩子和后代之间的区别就好了。然而，我有一个与子选择器有关的问题。也许我不正确地理解某些东西。以下面的HTML为例。这是一个3层导航菜单。在CSS根据我对孩子的理解CSS儿童选择器

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

（>）选择，下面将是真实的：

#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定义中的第二层。

有意义吗？

来源

2011-06-10 Chris

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层工作。

来源

2011-06-10 14:50:34 Niklas

我的一个小疏忽。非常有意义。谢谢！ – Chris 2011-06-10 15:21:21

@Chris没问题:)。至少你有使用'''孩子选择器的豪华......仍然坚持在自己支持IE6的网站上工作:( – Niklas 2011-06-10 15:28:09

#nav ul.menu > li > ul.sub-menu li {}

将适用于2层及以上。

#nav > ul.menu > li > ul.sub-menu > li {}

将仅适用于二线...

来源

2011-06-10 14:51:08

#nav ul.menu > li > ul.sub-menu li {} //二线

最后ul.sub-menu li选择同时选择孩子从二线li元素和decendant第三层内的li。

#nav ul.menu > li > ul.sub-menu > li {} //可能会迫使它限制到第二层

另外，根据http://www.evotech.net/blog/2008/05/browser-css-selector-support/为“E> F”选择的支持是IE6一个小马车，这可能不是你的问题。

来源

2011-06-10 14:53:02 benosteen

是的，我放弃了很久以前的IE6编码。对于答案 – Chris 2011-06-10 15:22:04

'E> F'不只是IE6中的越野车 - 它没有实现。 – thirtydot 2011-06-10 15:35:57

啊，比我想象的要糟糕;） – benosteen 2011-06-10 16:00:15

CSS儿童选择器

回答

相关问题