僅CSS選擇直接子項目

Question

我有以下的html標記。我想申請一個css風格的li項目，這是主要ul的直接子項目。我不想選擇嵌套在li裏面的li物品。我怎樣才能做到這一點？

在下面的代碼中，我只想選擇「主要項目1」和「主要項目2」。我試着>運營商，但它不起作用。

HTML：

<div class="nav"> 
    <ul> 
     <li><a>Main item 1</a></li> 
     <li><a>Main item 2</a> 
      <ul> 
       <li><a>sub item 1</a></li> 
       <li><a>sub item 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

.nav > ul li a:hover{ 
    color: red; 
} 

演示： http://jsfiddle.net/tk6RS/

Answer 1

你只>選擇父ul，你需要添加另一個也挑選ul的直系子弟，例如：

.nav > ul > li > a:hover{ 
    color: red; 
} 

您還需要添加li > a:hover到選擇其中的錨元素，因爲子元素<a>也在<li>範圍內。

Answer 2

只是更加具體。

.nav > ul > li > a:hover{ 
    color: red; 
} 

爲了更準確......

.nav > ul li 

選擇任何li那就是ul那就是.nav直接子內。這包括在任何子菜單內的li。

.nav > ul > li 

只選擇li屬於ul那就是.nav直接孩子的直接孩子。

通過擴展，您只想選擇在選定的li（出於與上述相同的原因）的錨點....因此原始答案。