CSS 和 CSS 中的选择器jQuery：只是类/id，还是标签？
在 CSS 和 jQuery 中使用类/id 选择器时，我经常看到两种不同的方法：
1.只是类或 ID：
CSS：
.foo{}
#bar{}
jQuery：
$(".foo")
$("#bar")
2。类或 id 及其标签：
CSS:
div.foo{}
div#bar{}
jQuery:
$("div.foo")
$("div#bar")
我的问题是：禁止使用标签来进一步细化选择器，有什么问题吗将标签与类/id 一起放置？哪个是正确的语法？
我听一些人说，除非标签是为了特殊性而需要的，否则放置它是完全错误的。虽然其他人说这没有什么区别，实际上更喜欢它，因为它提供了有关选择器的更多信息。
你怎么认为？
Working with class/id selectors in CSS and in jQuery, I often see two distinct approaches:
1. Just the class or id:
CSS:
.foo{}
#bar{}
jQuery:
$(".foo")
$("#bar")
2. The class or id with its tag:
CSS:
div.foo{}
div#bar{}
jQuery:
$("div.foo")
$("div#bar")
My question is: Barring the use of the tag to further refine the selector, is there anything wrong with placing the tag with the class/id? Which is proper syntax?
I've heard some that say that unless the tag is needed for specificity, it is dead wrong to place it. While others say it makes no difference, and in fact prefer it as it provides further information concerning the selector.
What do you think?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
标签
通过包含
$("div.foo")或div.foo{}，您可以向浏览器提供帮助，告诉它不要用特定的值搜索每个元素。班级或 ID。相反，在上面的示例中，它只会搜索
div。尽管在单个元素或小页面上性能可能可以忽略不计，但如果您正在谈论具有数千个标签和多个不同 css 或 jQuery 调用的文档，则性能可能会增加。
区分两个元素
在某些情况下，您可能也需要它来区分具有相同类的两个元素。
为了具体
另外，我认为您应该尽可能包含这些元素，作为使您的 CSS（和 jQuery）尽可能具体的一种方式...将意外情况降到最低！
更适合共享代码/故障排除/更新
当元素包含在规则中时，查找/更改/编辑规则也更加容易。
编辑
为了回应@stefmikhail关于@YoTsumi基准测试的评论，这里有一个区别：
搜索唯一的ID永远是最快的事情，因为页面和引擎上应该只有一个ID需要单独寻找它。然而，正如 @BoltClock 提到的，这个问题不仅仅是性能问题。
With the tag included
$("div.foo")ordiv.foo{}you are giving the browser a hand, telling it not to search every element with a certain class or ID. Instead, in the examples above, it would just search
divs.Although the performance may be negligible on a single element or a small page, it could add up if you are talking about a document with thousands of tags and several different css or jQuery calls.
Distinguishing between two elements
In some cases you may need it, too, to distinguish between two elements with the same class.
For Specificity
Plus, I think that you should include the elements when possible, as a way to make your CSS (and jQuery) as specific as possible... keeping the surprises to a minimum!
Better for shared code/troubleshooting/updating
It is also much easier to find/change/edit rules when the element is included in the rule.
EDIT
To respond to @stefmikhail's comment about @YoTsumi's benchmark test, here is the difference:
Searching for a unique ID will always be the fastest thing, as there should only be one ID on a page and the engine needs to look for it and it alone. However, as @BoltClock mentioned, there is more to this question than performance.
我刚刚编写了一个基准来比较有标签和没有标签的情况。
http://jsperf.com/id-class-and-tag
如果您期望获得最佳性能：不要添加标签！
I've just write a benchmark to compare with and without the tag.
http://jsperf.com/id-class-and-tag
If you expect best performances : don't add the tag !
我相信（CSS 或 jQuery）的选择器引擎尽可能具体（即包含标签）的性能更高 - 但您可能永远不会注意到其中的差异。以下是 jQuery 创建者 John Resig 在讨论人们在 jQuery 代码中使用的选择器时引用的一句话：
I believe it's more performant for the selector engine of either (CSS or jQuery) to be as specific as possible (i.e., include the tag) - but you may never notice the difference. Here's a quote from jQuery creator John Resig discussing the selectors people use in their jQuery code:
在 jquery 中，普通 ID 是在文档中找到下一个元素的最快方式（现在我说在所有版本的浏览器中最快）。因为jquery使用
document.getElementById来查找DOM元素。另一方面，类可能很棘手，sizzle 会在它上面运行，而且我实际上认为 div.foo 比 .foo 更快，因为元素集合的分配比在 DOM 中查找所有元素要低。现代浏览器具有比使用元素名称更快的查询选择器（请注意，我尚未对此进行测试）。较旧的浏览器会发现 div.class 比 .class 更快，但在现代浏览器中，您应该采取相反的方式。in jquery an plain ID is the fastest way you can find an element on a document, the next one (now I say fastest with all versions of browsers). Because jquery uses
document.getElementByIdto find the DOM element. The Class on the other hand can be tricky, sizzle will run on it, and I actually think div.foo is faster then .foo because with a collection of the elements is allot lower then looking on all elements in the DOM. modern browsers has query selectors that will be faster then using the element name (note that I haven't done tests on this). Older browsers will find div.class faster then .class but in modern browsers you should get the other way around.引用自 Wiley 的 Smashing CSS 书“
别惊慌（暂时）！首先看几个例子。
div ul ul li 0,0,0,4 四元素描述符
div.aside ul li 0,0,1,3 一个类描述符，三个元素描述符
a:hover 0,0,1,1 一个伪类描述符，一个元素描述符
div.navlinks
a：悬停
0,0,2,2 1个伪类描述符，1个类描述符，2个元素
描述符
:hash:title em 0,1,0,1 1个ID描述符，1个元素描述符
h1:hash:title em 0,1,0,2 一个ID描述符，两个元素描述符
希望这能让您了解特定的城市价值是如何建立的。现在，为什么
逗号？因为可以这么说，特定城市价值的每个“级别”都是独立的。因此，一个
具有单个类描述符的选择器比具有 13 个元素的选择器具有更多的特定城市
描述符。”
因此，覆盖样式的重要性在于添加标签名称，就 jQuery 而言，您可以始终在它们之前使用选择器，因为某些类名称（如“active”）可以应用于多个（内联和块级）元素造成不良影响。希望这在某种程度上有所帮助......干杯！
Quoting this from Wiley's Smashing CSS book "
Don’t freak out (yet)! Take a look at a few examples fi rst.
div ul ul li 0,0,0,4 Four element descriptors
div.aside ul li 0,0,1,3 One class descriptor, three element descriptors
a:hover 0,0,1,1 One pseudo-class descriptor, one element descriptor
div.navlinks
a:hover
0,0,2,2 One pseudo-class descriptor, one class descriptor, two element
descriptors
:hash:title em 0,1,0,1 One ID descriptor, one element descriptor
h1:hash:title em 0,1,0,2 One ID descriptor, two element descriptors
Hopefully, this begins to give you an idea of how specifi city values are built up. Now, why the
commas? Because each “level” of specifi city value stands on its own, so to speak. Th us, a
selector with a single class descriptor has more specifi city than a selector with 13 element
descriptors."
So singnificance of overriding styles is presented with adding the tag names, as far as jQuery is concerned w.r.t classes u could always use selectors preceding them as some of the class names like "active" can apply to multiple (inline and block level ) elements leading to undesired effects. Hope this helped in some way...Cheers!
就我个人而言，我像一只发痒的猫头鹰一样在两者之间跳来跳去。
有时很高兴看到标签名称来提醒您（和您的）同事您实际正在处理什么以及您可以期望什么样的行为。
我觉得用哪个都好。
选择感觉最自然的方式（不会让你的眼睛受伤）
Personally I hop between the two like a itchy owl..
Sometimes it's nice to see the tag name to remind you (and your) co-workers what it is your actually working with and what kind of behaviour you can expect.
I think it's fine to use either.
Go with what feel most natural (doesn't make your eyes hurt)