CSS 选择器约定：为什么 Chrome 建议您尽可能通过 #id 进行选择？答案

【问题标题】：CSS selector conventions: Why does Chrome suggest you to select via #id when possible?CSS 选择器约定：为什么 Chrome 建议您尽可能通过 #id 进行选择？
【发布时间】：2018-09-06 16:40:34
【问题描述】：

示例：我有这个元素：

<div id="foo" class="my-foo"></div>

如果我点击 chrome 控制台中的“+”按钮

Chrome 会“建议”通过它的 id 而不是通过类来选择 div，如下所示：

div#foo{}

通过 ID 设置元素样式是不是有点不正确？

【问题讨论】：

取决于出现的次数。如果您只有一次该元素，并且只想在不再需要它的情况下为该特定项目设置样式，则使用 ID，如果没有，则使用类。 唯一 = ID ; 多 = 类。毕竟这取决于你，但我将此习惯称为最佳实践。
它只是 chrome 的一个选择器 suggestion 启发式，我猜没什么好想的 :)
可能是因为你同时给了它，一个 id 和一个类，因为 id 优先于类...

标签： css google-chrome css-selectors google-chrome-devtools

【解决方案1】：

在为具有 ID 的元素添加样式规则时，检查器通常假定您只想设置该元素的样式，而不是任何其他 div 元素或恰好匹配 .my-foo 的元素，因此建议ID 选择器。

不过，我不清楚为什么它会在 ID 前添加类型选择器。如果它试图防止重复 ID，它肯定不会阻止选择器匹配两个具有相同 ID 的 divs，这比具有相同 ID 的两个不同类型的元素更有可能。

【讨论】：

我在这方面做了很多工作，我注意到的规则是谷歌每次都会选择最具体的选择器......例如，当有很多类和 0 ID 时，谷歌会选择所有类并将它们附加到标签以创建选择器。
@Temani Afif：是的，它通常会对此非常保守。它无法猜测哪些类你对样式感兴趣，所以它全力以赴。但是，出于某种原因，这仅适用于类和 ID，而不适用于任何其他属性。因此，如果您有<p align=center data-foo=bar>，检查器将为p 添加规则，忽略这两个属性（甚至是数据属性！）。