Question

在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放在一起有什么不对吗？哪种语法正确？

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

您怎么看？

Answer 1

我只是写了一个基准来与标签进行比较。

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

如果您期望获得最佳效果：请勿添加标记！

Answer 2

包含标签

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

您正在给浏览器一只手，告诉它不要搜索具有某个类或ID的每个元素。相反，在上面的示例中，它只会搜索div s。

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

区分两个元素

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

特殊性

另外，我认为你应该尽可能包含这些元素，以尽可能地使你的CSS（和jQuery）具体化......将惊喜降到最低！

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

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

修改

回应@ stefmikhail关于@ YoTsumi基准测试的评论，不同之处在于：

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

Answer 3

我认为（CSS或jQuery）的选择器引擎尽可能具体（即包含标签）更具性能 - 但您可能永远不会注意到差异。以下是jQuery创建者John Resig讨论人们在jQuery代码中使用的选择器的引用：

例如，“。class”比“tag.class”更受欢迎，即使第二个更高效。对此尤为重要的是，性能受到的影响程度并不是很大。例如，4ms和30ms之间的差异几乎是不可察觉的。（Source）

Answer 4

在jquery中，普通ID是您在文档上找到元素的最快方式，下一个（现在我说对所有版本的浏览器来说速度最快）。因为jquery使用document.getElementById来查找DOM元素。另一方面，Class可能很棘手，sizzle会在它上运行，而我实际上认为div.foo比.foo更快，因为元素的集合分配得更低，然后查看DOM中的所有元素。现代浏览器的查询选择器将比使用元素名称更快（请注意，我还没有对此进行过测试）。较旧的浏览器会比.class更快地找到div.class，但在现代浏览器中，你应该反过来。

Answer 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：悬停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而言，类可以使用前面的选择器，因为某些类名称（如“active”）可以应用于多个（内联和块级）元素不受欢迎的影响。希望这有所帮助......干杯！

Answer 6

就我个人而言，我喜欢痒痒的猫头鹰。

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

我觉得使用它们都没问题。

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

CSS中的选择器＆amp; jQuery：只是class / id，还是标签？

6 个答案: