css - スペースのない要素と独自の属性のCSS仕様

Question

スペックに関して、以下のスタイルの違いは何ですか？

  ul .active { background: #E7F3EF;}
  ul li.active { background: #E7F3EF;}


<ul>
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

最後の1つは、誤ってsassにコーディングし、ul li .active理解するのに時間がかかりました。

Answer 1

ul .active { background: #E7F3EF;}

これは、要素の子孫であるクラス名「アクティブ」を持つすべての要素と一致しulます。

ul li.active { background: #E7F3EF;}

liこれは、要素の子孫であるクラス名「アクティブ」を持つすべての要素と一致しulます。

ul li .active { background: #E7F3EF;}

liこれは、要素の子孫である要素の子孫である「アクティブ」というクラス名を持つ要素と一致しulます。

お気づきのように、空白は適切です。セレクター内の空白は、多くの場合、子孫コンビネーターを示します。

仕様の関連部分については、「子孫コンビネータ」を参照してください。