適用するだけで、親のための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

あなたはこのように、そのために>演算子を使用することができます：あなたは、ULにのみBGCOLORを適用したい場合は

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

：

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

Answer 3

これを行うための唯一の方法は次のようです単に実行します。

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

:)