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

Question

示例：我有这个元素：

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

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

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

div#foo{}

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

标签： cssgoogle-chromecss-selectorsgoogle-chrome-devtools

Answer 1

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

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