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兒童選擇器

回答

相關問題