應用CSS只有父母而不是孩子

Question

我有一個無序列表如下：

<div class="list"> 
<ul> 
    <li> 
     list1 
     <ul> 
      <li>Sub list1</li> 
      <li>Sub list2</li> 
      <li>Sub list3</li> 
     </ul> 
    </li> 
    <li> 
     list2 
     <ul> 
      <li>Sub list1</li> 
      <li>Sub list2</li> 
      <li>Sub list3</li> 
     </ul> 
    </li> 
</ul> 
</div> 

我現在只想爲第一個列表，但不是它的孩子ul和li應用CSS。我嘗試了以下操作：

.list ul li{ 
background:#ccc; 
} 

...但背景顏色應用於所有列表。應該做什麼來改變只有父母而不是孩子的CSS。

Answer 1

使用嫡系操作>爲：

.list > ul > li { ... } 

的>運營商只選擇那些面前的元素（一個或多個）直接子元素。

但是請注意，儘管沒有任何背景顏色直接分配給該列表項，但該列表項中的任何內容當然會具有列表項的背景。

Answer 2

可以使用>運算符的是，像這樣的：如果你想只將bgcolor適用於UL

.List > ul > li { background-color: #ccc; } 

：

.list > ul > li{ 
    background:#ccc; 
} 

Answer 3

這樣做的唯一方法是像簡單地做：

.List > ul { background-color: #ccc; } 

:)