HTML5和CSS选择器-反直觉？

自从我读到这本书以来，我一直有一个问题困扰着我。我得到的一般结论是，具有多个元素的CSS选择器向后工作，而键选择器决定了很多效率，因为它缩小了前缀规则选择的DOM元素的数量

然而，这让我感到困惑。即与新的HTML5

等（块样式标记）相关。我使用

等标记来避免使用

的HTML结构。如果我最终不得不写

来提高效率，为什么还要麻烦使用效率POV中的

标记呢

同样在一般意义上，您对选择器的通用结构有何建议？以下面的文档为例：EDIT很抱歉，我忘了说明哪个元素。在这种情况下，

---

最后，这在多大程度上影响了相关网页的效率？它值得考虑（在gzip、JS在DOM中的位置、缩小等之后）还是只是吹毛求疵？谢谢你的时间

根据我的经验，对于正常大小的html文档，选择器性能可以忽略不计。如果您没有高性能的站点，那么尽量避免编写低效的怪物选择器（

*

，属性和伪类/元素选择器）就是您所需要的

---

你不会注意到

header

和

div.header

选择器之间的区别，最好把时间花在别处。

我真的不明白你在问什么。在您的第一个示例中，您只需使用

标题{}

来处理元素，不是吗？我必须同意Pekka…标题标签不仅仅用于样式设计，这会告诉搜索引擎、机器人和所有设备这是标题，我相信Nick是在询问使用类（

.header

）的事实是一个比使用元素（

标题

）更高效的CSS选择器，如果您只需要添加类来提高CSS效率，那么从

到

可以获得什么。我还将指出，这篇文章已经有两年多的历史了，性能问题本质上取决于实现。由于在过去两年中，实现可能发生了很大变化，而且不同浏览器之间的实现也有所不同，因此大多数时候担心它是毫无意义的；除非您能够清楚地证明实际最终用户在您的特定应用程序中注意到的显著差异。在此之前，我们需要担心干净、简单、逻辑性强、可维护的代码。我们不要忘记CSS也是在客户端处理的。你必须了解你的受众——网页设计的首要原则。如果你知道你的一部分观众仍然在用IE 5运行奔腾4处理器，那么优化你的CSS可能是相关的。即使在很久以前，我也不记得CSS曾经是一个问题。@crush你不必关心这些人，因为他们的浏览器无论如何都会呈现95%的页面错误，而不管超高性能选择器是什么：-D

<header>
    <div>
        <img src="http://www.google.com/" />
    </div>
</header>