CSS & jQuery 中的选择器：只是类/id，还是标签？

Posted 2023-03-06

【中文标题】CSS & jQuery 中的选择器：只是类/id，还是标签？

【英文标题】：Selectors in CSS & jQuery: just the class/id, or the tag as well?

【发布时间】：2011-11-17 07:17:37

【问题描述】：

在 CSS 和 jQuery 中使用类/id 选择器时，我经常看到两种截然不同的方法：

1.只是类或 ID：

CSS：

.foo

#bar

jQuery：

$(".foo")

$("#bar")

2。带有标签的类或 id：

CSS：

div.foo

div#bar

jQuery：

$("div.foo")

$("div#bar")

---

我的问题是：除非使用标签来进一步细化选择器，否则将标签与 class/id 一起放置有什么问题吗？哪个是正确的语法？

我听过一些人说，除非标签是为了特殊性而需要的，否则放置它是完全错误的。虽然其他人说它没有区别，实际上更喜欢它，因为它提供了有关选择器的更多信息。

你怎么看？

【问题讨论】：

添加标签会影响性能并变慢，如果不需要，请避免。尝试遵循一个常见的模式。

@Nico - 谢谢！很棒的信息。非常感谢。

不太清楚为什么我的问题被否决了。不合法吗？

@Nico - 实际上，我认为情况正好相反。特异性提高性能。

Is there any reason for including the tag name with a class or ID selector in CSS? 的可能重复项

【参考方案1】：

包含标签

$("div.foo") 或 div.foo

您正在帮助浏览器，告诉它不要搜索具有特定类或 ID 的每个元素。相反，在上面的示例中，它只会搜索 divs。

虽然在单个元素或小页面上性能可能可以忽略不计，但如果您谈论的是包含数千个标签和几个不同 css 或 jQuery 调用的文档，它可能会加起来。

区分两个元素

在某些情况下，您可能还需要它来区分具有相同类的两个元素。

为了具体

另外，我认为你应该尽可能地包含元素，作为一种使你的 CSS（和 jQuery）尽可能具体的方法......将惊喜降到最低！

更适合共享代码/故障排除/更新

当元素包含在规则中时，查找/更改/编辑规则也容易得多。

编辑

为了回应@stefmikhail 关于@YoTsumi 基准测试的评论，这里是不同之处：

搜索唯一 ID 始终是最快的事情，因为页面上应该只有一个 ID，并且引擎需要单独查找它。然而，正如@BoltClock 提到的，这个问题不仅仅是性能。

【讨论】：

所以你的意思是即使元素类型选择器不需要特殊性，如果只有类foo属于div，它也应该用于提高性能？

我只是要赞成这个答案，而不是浪费我的代表反对所有其他只关注性能的答案，而不关心div.foo这样的事实和.foo 不要选择完全相同的元素集，尤其是当问题中没有对 html 做出这样的假设，并且问题首先没有提到性能时。

如果在渲染样式方面选择器是您的瓶颈，那么您需要解决更大的问题。

感谢@BoltClock。同意...对两个 cmets！

@BoltClock - 我特意声明如下，“除非使用标签来进一步细化选择器”来提出关于速度的问题和标记时的语法 not 需要进一步指定所选元素。

【参考方案2】：

我刚刚写了一个基准来比较有标签和没有标签的情况。

http://jsperf.com/id-class-and-tag

如果你期待最好的表现：不要添加标签！

【讨论】：

感谢 jspref 在我写答案时无法在我的书签中找到它；)

非常有趣。看起来我从不同的人那里得到了相互矛盾的答案。你是我一直相信的；添加标签会减慢查询速度。

这也是有道理的：底层选择器只检查所有元素，如果它有正确的 id 就不需要再检查了，因为 id 是唯一的。如果你还在选择器中包含了标签，它需要检查找到的匹配是否也有正确的标签。

@YoTsumi - 另外，看看 Chrome 和 Firefox 之间的速度差异，尤其是在 id 选择器上。我从来不知道id 选择器比class 选择器快得多。那么为什么 jQuery 有 .addClass 但对于 id 你必须添加一个属性？或者这是无关的，与嘶嘶声有关？

@stefmikhail 这取决于您想要支持的浏览器以快速找到元素 #id 的问题，没有什么比document.getElementById 更快的了，因为只要您找到一个具有该ID 的元素，它就会拥有您所关注的DOM 元素。

【参考方案3】：

我相信选择器引擎（CSS 或 jQuery）尽可能具体（即包含标签）会提高性能 - 但您可能永远不会注意到差异。这是 jQuery 创建者 John Resig 的引述，他讨论了人们在 jQuery 代码中使用的选择器：

例如，“.class”比“tag.class”更受欢迎，尽管第二个性能更高。对此特别重要的是，性能影响的程度并不是什么大问题。例如，4ms 和 30ms 之间的差异几乎无法察觉。 (Source)

【讨论】：

优秀的答案！这就是我一直在寻找的。好奇，当你说“表演者”时，你是什么意思？

【参考方案4】：

在 jquery 中，普通 ID 是您在文档中查找元素的最快方式，下一个（现在我说所有版本的浏览器都最快）。因为 jquery 使用document.getElementById 来查找 DOM 元素。另一方面，类可能很棘手，嘶嘶声会在它上面运行，而且我实际上认为 div.foo 比 .foo 更快，因为与查看 DOM 中的所有元素相比，元素集合的分配要低。现代浏览器具有比使用元素名称更快的查询选择器（请注意，我尚未对此进行测试）。较旧的浏览器会比 .class 更快地找到 div.class，但在现代浏览器中，您应该换一种方式。

【参考方案5】：

引用 Wiley 的 Smashing CSS 书“

说三遍很难，更难把握，但这是关键 了解 CSS 规则如何相互作用。 特异性是选择器“特异性”的数字表示。有三种 用于确定选择器的具体城市的东西：

每个元素描述符贡献 0,0,0,1。 每个类、伪类或属性描述符贡献 0,0,1,0。 每个 ID 描述符贡献 0,1,0,0。 不要惊慌（还）！先看几个例子。 div ul ul li 0,0,0,4 四元素描述符 div.aside ul li 0,0,1,3 一个类描述符，三个元素描述符 a:hover 0,0,1,1 一个伪类描述符，一个元素描述符 div.navlinks 一：悬停 0,0,2,2 一个伪类描述符，一个类描述符，两个元素 描述符 :hash:title em 0,1,0,1 一个ID描述符，一个元素描述符 h1:hash:title em 0,1,0,2 一个ID描述符，两个元素描述符 希望这开始让您了解特定城市价值是如何建立的。现在，为什么 逗号？因为每个特定城市价值的“级别”都是独立的，可以这么说。我们，一个 具有单个类描述符的选择器比具有 13 个元素的选择器具有更具体的城市 描述符。” 因此，覆盖样式的重要性在于添加标签名称，就 jQuery 而言，wrt 类你总是可以在它们之前使用选择器，因为像“active”这样的一些类名可以应用于多个（内联和块级）元素前导到不良影响。希望这在某种程度上有所帮助...干杯！

【参考方案6】：

就我个人而言，我像一只发痒的猫头鹰一样在两者之间跳跃......

有时很高兴看到标签名称可以提醒您（和您的）同事您实际使用的是什么以及您可以期待什么样的行为。

我觉得两者都可以。

选择最自然的感觉（不会让你的眼睛受伤）

【讨论】：

感谢您的诚实。这也是我目前的立场......虽然我觉得我们都会被这个帖子上的某些评论者责备......;）