没有空格的元素和自身属性的 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;}

这个将匹配任何类名为“active”的元素，它是 ul 的后代。元素。

ul li.active { background: #E7F3EF;}

这个将匹配任何 li类名为“active”的元素是 ul 的后代元素。

ul li .active { background: #E7F3EF;}

这个会匹配任何类名为“active”的元素，它是 li 的后代。元素，它是 ul 的后代元素。

如您所见，空格是相关的。选择器中的空格通常表示后代组合器。

有关规范的相关部分，请参阅“Descendant combinators”。