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

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レベルのスパンのプロパティを特にリセットせずに実行できますか？

試しul > li spanましたが、うまくいかないようです。スタイルを2レベルにも適用します。

Answer 1

たとえば<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、セレクターの開始点としてそれを使用できます（例ではそれがaであると仮定しますdiv）。

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

Answer 4

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