以下样式在规格方面有什么区别?
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
花了我一些时间才弄清楚。
以下样式在规格方面有什么区别?
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
花了我一些时间才弄清楚。
ul .active { background: #E7F3EF;}
这将匹配任何具有类名“活动”的元素,该元素是ul
元素的后代。
ul li.active { background: #E7F3EF;}
这将匹配任何li
具有类名“活动”的元素,该元素是元素的后代ul
。
ul li .active { background: #E7F3EF;}
这将匹配任何具有类名“活动”的li
元素,该元素是元素的后代,即元素的后代ul
。
正如您所注意到的,空格是相关的。选择器中的空格通常表示后代组合子。
有关规范的相关部分,请参阅“后代组合器”。