That's a quite hard cause both, the selector itself and its location in sheet do matter. Also the fact that there is no only one, true way of writing CSS doesn't help.
I guess it would be the best if you use ID and tag selector. Additionally use attribute selector:
Usually a developer will want to forms look the same all over the website, that's why he will use tag name selector:
input { ... }
select { ... }
These selectors are weaker that #contact-form input so they won't override anything. However sometimes it's necessary to override some rules so the developer will use #contact-form input selector which is pretty natural in such case.
If sheets has been attached as a recommendation says developer's styles will override yours, despite the fact that both have selectors with exactly same strength. That's why the location of the rules matter.
#site-wrapper input { background: yellow; } [...] I don't want it to over-rule my contact form styles that refer to classes, .contact_input { background: white; }
You basically can't, if you use those selectors: #ids are more specific than .classes, and that's it. I would suggest you drop the #site-wrapper selector bit from the first rule, since it's meant to be generic.
I guess you should adopt kind of "namespace" pattern.
E.g. start all your styles with #ds_contactform and make them as specific as you can without messing with semantics and convinient maintenance of the code.
I don't think that using specific selectors (with an #id or even several ids) is ineffecient whatsoever.
发布评论
评论（7）
这是一个相当困难的问题，因为选择器本身及其在工作表中的位置都很重要。而且，编写 CSS 的真正方法并不只有一种，这一事实也无济于事。
我想如果你使用 ID 和标签选择器会是最好的。另外使用属性选择器：
但是您应该提到，强烈建议将该表放在其他表的顶部，例如：
为什么采用这种方法？
通常，开发人员希望表单在整个网站上看起来都相同，这就是为什么他会使用标签名称选择器：
这些选择器比
#contact-form input弱，因此它们不会覆盖任何内容。然而，有时需要覆盖一些规则，因此开发人员将使用#contact-form input选择器，这在这种情况下是很自然的。如果作为建议附加了工作表，则表示开发人员的样式将覆盖您的样式，尽管两者都具有具有完全相同强度的选择器。这就是规则的位置很重要的原因。
That's a quite hard cause both, the selector itself and its location in sheet do matter. Also the fact that there is no only one, true way of writing CSS doesn't help.
I guess it would be the best if you use ID and tag selector. Additionally use attribute selector:
However you should mention that it's strongly recommended to put that sheet on the top of others, eg:
Why that approach?
Usually a developer will want to forms look the same all over the website, that's why he will use tag name selector:
These selectors are weaker that
#contact-form inputso they won't override anything. However sometimes it's necessary to override some rules so the developer will use#contact-form inputselector which is pretty natural in such case.If sheets has been attached as a recommendation says developer's styles will override yours, despite the fact that both have selectors with exactly same strength. That's why the location of the rules matter.
我想你已经回答了你自己的问题：
！
I think you've answered your own question on this one:
CSS!
你最好的选择是使用类似于以下的模式：
这样你的样式是独特的{JSCF for Josiah Sprauge Contact Form}并且具体且指定为重要......
your best bet is to use a schema somewat similar to the following:
that way your styles are unique {JSCF for Josiah Sprauge Contact Form} and specific and specified as important...
如果您使用这些选择器，您基本上不能：
#id比.class更具体，仅此而已。我建议您从第一条规则中删除
#site-wrapper选择器位，因为它意味着通用。You basically can't, if you use those selectors:
#ids are more specific than.classes, and that's it.I would suggest you drop the
#site-wrapperselector bit from the first rule, since it's meant to be generic.我想你应该采用某种“命名空间”模式。
例如，以
#ds_contactform开始所有样式，并使其尽可能具体，而不会扰乱语义并方便维护代码。我不认为使用特定的选择器（带有 #id 甚至多个 id）是低效的。
PS 我还推荐 Andy Clarke 的精彩文章 CSS：特异性战争。
I guess you should adopt kind of "namespace" pattern.
E.g. start all your styles with
#ds_contactformand make them as specific as you can without messing with semantics and convinient maintenance of the code.I don't think that using specific selectors (with an #id or even several ids) is ineffecient whatsoever.
P.S. And I also recommend Andy Clarke's fantastic article CSS: Specificity Wars.
您可以考虑使用 BEM 方法，它具有非常出色的类命名样式，可以通过多种方式解决特殊性问题。
You may consider of using BEM methodology, It has really awesome class naming styles which solves specificity issues in many ways.
如果您使用 !important，它将始终覆盖 ID 或类的样式。查看此链接了解更多信息；
http://www.electrictoolbox.com/using-important-css/
您可以查看此链接以获得有关特异性的更多信息；
http://www.smashingmagazine.com/ 2007/07/27/css-speciality-things-you-should-know/
If you use !important, it will always override the style with respect to an ID or a class. Have a look at this link of further information;
http://www.electrictoolbox.com/using-important-css/
You can have a look at this link in order to get more information on specificity;
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/