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>

最后一个我错误地用 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。

正如您所注意到的，空格是相关的。选择器中的空格通常表示后代组合子。

有关规范的相关部分，请参阅“后代组合器”。