css - HTML5 和 CSS 选择器——违反直觉？

Question

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

然而，这让我很困惑。即关于新的 HTML5 <header>等( block 式标签)。我用 <header>等标签以避免使用 <div class="header"> 的 HTML 结构.我为什么要费心使用 <header>来自效率 POV 的标签，如果我最终不得不写 <header class="header">以提高效率。

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

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

最后，这对相关网页的效率有多大影响？是否值得考虑(在 gzip、DOM 中的 JS 放置、缩小等之后)还是只是吹毛求疵？感谢您的宝贵时间!

Answer 1

根据我的经验，对于正常大小的 html 文档，选择器的性能可以忽略不计。如果您没有高性能站点，那么您只需要尽量避免编写低效的怪物选择器(*、属性和伪类/元素选择器)。

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