HTML5和CSS选择器 - 反直觉？

Question

自从我阅读this以来，我有一个问题一直困扰着我。我已经得到了通用，只有具有多个元素的CSS选择器向后工作，并且该键选择器决定了很多效率，因为它缩小了由前缀规则选择的DOM元素的数量。

然而这让我很困惑。即与新的HTML5 <header>等相关（块样式标签）。我使用<header>等标签来避免使用<div class="header">的HTML结构。如果我最终必须编写<header>来提高效率，为什么我还不愿意使用效率POV中的<header class="header">标记。

同样在一般意义上，您的建议对于选择器的通用结构会是什么？鉴于下面的文档，作为一个例子：编辑我很抱歉，我忘了说明哪个元素。在这种情况下，您的选择器对于<img>标记会是什么。

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

最后，这会影响相关网页的效率多少？值得思考（在gzip之后，在DOM中放置JS，缩小等）还是只是挑剔？谢谢你的时间！

Answer 1

根据我的经验，正常大小的html文档的选择器性能可以忽略不计。如果您没有高性能站点，那么您可以尝试避免编写低效的怪物选择器（*，属性和伪类/元素选择器）。

您不会注意到header和div.header选择器之间的区别，最好在其他地方消磨时间。