这个选择器是错误还是低效？

Question

这只是一个简单的问题，但我要说的是我有这个HTML：

<div class="header">
    <ul>
        <li>Hi</li>
    </ul>
</div>

像这样设置我的CSS样式是错误还是低效？

.header ul li { font-size: 12px; }

我相信我之前已经阅读过不推荐的内容，但它似乎是设计HTML和CSS的最简洁方法。

Answer 1

你没有引用你所读的内容，所以我猜测你读了一些关于＆＃34;使用高效的CSS选择器＆＃34;。这个是是Page Speed Insights recommendations之一;似乎这条建议已被删除。

据我所知，这条规则鼓励尽可能简短地选择*。对于给定的标记，在标题中所有列表项更有效：

.header li { }

而不是在标题内的无序列表中说所有列表项：

.header ul li { }

事实上，如果可能，您可以使用更短的规则：

.header { /* children inherit the inheritable properties */ }
li      { /* affects all list items, use if all must be styled similarly */ }

---

*据我记忆，PageSpeed文档说浏览器从下到上匹配CSS规则。对于如下规则：

li { color: red; }

遇到列表项时，它可以简单地应用红色。而对于如下规则：

.header ul li { }

浏览器在遇到列表项时必须 up 文档树，检查其中一个父项是无序列表，父母是否具有.header类。浏览器必须检查列表项的所有父项，直到找到匹配项或它到达文档元素。这是低效的。

此规则已从PageSpeed建议中删除，因此浏览器可能找到了处理低效选择器的有效方法。