最初のレベルの子要素にのみスタイルを適用します。

Question

<ul> 
    <li> <span> apply </span> </li> 
    <li> <span> apply </span> </li> 
    <li> 
    <ul> 
     <li> <span> ignore </span> </li> 
     <li> <span> ignore </span> </li> 
    </ul> 
    </li> 
</ul> 

CSSルールを最初のレベルからスパン要素に適用し、ネストされたリストのスパン要素をルールを無視する方法を教えてください。

第2レベルのスパンのプロパティを特にリセットせずにこれを行うことはできますか？

Answer 1

を

はul > li spanを試みたが、それが動作するようには思えない、私はスタイルがあまりにも第二のレベルに適用されますたとえば<div id="ul-wrapper">のために、IDとラッピングdivの中であなたのリストを入れて、試してみてください。

#ul-wrapper > ul > li > span { 
    /* my specific CSS */ 
} 

Answer 2

#container > ul > li span { /* - Your CSS Here - */ } 

最初のレベルulのみが選択できるようにコンテナを指定する必要があります。

Answer 3

ul > li > span {border:solid 1px red;} 
li > ul > li > span {border:none 1px red;}; 

Answer 4

限り外ulの親が別のliないよう、あなたの選択のための出発点として（例は仮定し、それはdivだ）ことを使用することができますどのような要素がある

div > ul > li span { 
    /* Whatever */ 
}