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

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

1。只有类或id:

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

CSS:

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

jQuery:

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

2。类或id及其标记：

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

CSS:

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

jQuery:

.foo{}

#bar{}

$(".foo")

$("#bar")

div.foo{}

div#bar{}

$("div.foo")

$("div#bar")

---

我的问题是：除非使用标记来进一步优化选择器，否则将标记与class/id一起放置是否有任何错误？哪个是正确的语法

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

---

您认为呢？

我认为，选择引擎（CSS或jQuery）尽可能具体（即包括标记）会更有效，但您可能永远不会注意到区别。以下是jQuery创建者John Resig的一段话，他讨论了人们在jQuery代码中使用的选择器：

例如，“.class”远比“tag.class”更受欢迎，尽管第二个更具性能。关于这一点，特别重要的是性能受影响的程度并不是一个很大的问题。例如，4ms和30ms之间的差异实际上是难以察觉的。（）

---

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

有时候，看到标签名来提醒你（和你的）同事你实际上在做什么，以及你可以期望的行为是什么，这很好

我想两者都可以

---

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

我刚刚写了一个基准测试来比较标签和不标签

如果您希望获得最佳性能：不要添加标签

包含标签

$（“div.foo”）

或

div.foo{}

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

div

s

尽管在单个元素或一个小页面上的性能可以忽略不计，但如果您谈论的是一个包含数千个标记和几个不同css或jQuery调用的文档，那么性能可能会增加

区分两种元素

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

特异性

另外，我认为您应该尽可能地包含这些元素，以使您的CSS（和jQuery）尽可能具体。。。将惊喜保持在最低限度

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

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

编辑

为了回应@stefmikhail对@YoTsumi的基准测试的评论，以下是区别：

---

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

在jquery中，普通ID是在文档中查找元素的最快方式，下一种（现在我说的是所有版本浏览器中最快的）。因为jquery使用

document.getElementById

查找DOM元素。另一方面，这个类可能很复杂，sizzle将在它上面运行，我实际上认为div.foo比.foo快，因为元素集合的分配比DOM中的所有元素都低。现代浏览器的查询选择器比使用元素名更快（请注意，我还没有对此进行测试）。较旧的浏览器会比.class更快地找到div.class，但在现代浏览器中，你应该找到另一种方法。

引用Wiley的精彩CSS书中的这一点。”

很难快速说三遍，甚至更难完全理解，但这是关键 了解CSS规则如何相互作用。 特异性是选择器“特异性”的数字表示 用于确定选择器的指定城市的内容：

每个元素描述符贡献0,0,0,1

每个类、伪类或属性描述符贡献0,0,1,0

每个ID描述符贡献0,1,0,0。 先看几个例子，不要惊慌失措。 div-ul-li 0,0,0,4四元素描述符 div.li 0,0,1,3一类描述符，三元素描述符 a：将0,0,1,1悬停在一个伪类描述符和一个元素描述符上 导航链接分部 a:悬停 0,0,2,2一个伪类描述符，一个类描述符，两个元素 描述符 ：hash:title em 0,1,0,1一个ID描述符，一个元素描述符 h1：散列：标题em 0,1,0,2一个ID描述符，两个元素描述符 希望这能让你了解特定的城市价值观是如何形成的 逗号？因为可以说，每个特定城市值的“级别”都是独立的 具有单个类描述符的选择器比具有13个元素的选择器具有更多的特定性 描述符。” 因此，通过添加标记名来显示重写样式的重要性，就jQuery而言，w.r.t类u可以始终在它们前面使用选择器，因为一些类名（如“active”）可以应用于多个（内联和块级）元素，从而导致不希望的效果。希望这在某种程度上有所帮助…干杯

---

添加标签会影响性能并降低速度，如果不需要，请避免添加标签。不过，试着遵循一个共同的模式。@Nico-谢谢！好消息。非常感谢。不太清楚为什么我的问题被否决了。这不合法吗？@Nico-事实上，我认为这是相反的。具体的