为什么使用属性选择器来匹配类?


85

我找到了一个响应式电子邮件模板的示例,其中有诸如此类的CSS选择器:

a[class="btn"]

如果与以下语法完全相同,为什么要使用此语法:

a.btn

它对移动浏览器或其他任何影响吗?


5
@Jevgeni Bogatyrjov:这是一个完全不同的问题,甚至与CSS都不相关,但是我可以看到由于标题不正确,它可能会造成混淆。我已经编辑了
BoltClock

Answers:


142

[]语法是属性选择

a[class="btn"]

这将选择<a>带有的任何标签class="btn"。但是,它不会选择<a>具有的class="btn btn_red"(例如a.btn)。它仅该属性完全匹配

您可能需要阅读必须记住的30个CSS选择器。对于任何有前途的Web开发人员来说,这都是无价的。


但是它与响应性无关,它是纯CSS语法,对吗?
ducin

2
@tkoomzaaskz正确。
埃里克

我也碰到了同一教程(campaignmonitor.com/guides/mobile/coding)-他们在教程中使用这种技术似乎很奇怪。教程应该使刚入门的人尽可能清楚。尤其是当通用.btn选择器就足够时。我想念东西吗?有什么好处吗?我猜想更大的特异性?
nickspiel 2014年

有没有一种新的方法来使用jQuery和方括号来选择所有类名称,以获取具有相同前缀的所有类?像$(this).css(“ [class〜='btn_']”,“ red”)之类的东西;语法可能有误,但是您知道正确的语法是什么吗?
whyoz 2015年

1
如果您更新了答案以同时显示其他类型的属性选择器,那就太好了。搜索“ css选择器方括号”会在搜索中出现此问题,并且很难搜索其他变体(“ css选择器方括号星号”)。
cimmanon
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.