CSS和jQuery中的选择器:只是类/ id,还是标签？

Question

使用CSS和jQuery中的类/ id选择器,我经常看到两种不同的方法:

1.只是课程或身份证明:

CSS:

.foo{}

#bar{}

jQuery的:

$(".foo")

$("#bar")

2.带有标签的类或标识:

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的每个元素.相反,在上面的例子中,它只会搜索divs.

虽然在单个元素或小页面上的性能可以忽略不计,但如果您正在讨论包含数千个标记和几个不同的css或jQuery调用的文档,则可能会增加.

区分两个要素

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

特殊性

另外,我认为你应该尽可能包含元素,以尽可能使你的CSS(和jQuery)具体化......将惊喜降到最低!

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

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

编辑

要回应@ stefmikhail关于@ YoTsumi基准测试的评论,不同之处在于:

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