6

我正在创建一个联系表格，该表格将包含在几个不同的网站上。

联系表单的样式和网站的样式都将包括在内，我无法很好地预测网站的样式。我希望联系表单的样式很容易被网站的样式推翻，但我不希望联系表单的样式被意外推翻。

例如，如果网站开发人员想要更改提交按钮的颜色，应该很容易做到，而无需使用!important或一些过于特定#id #id element .class #id element.class类型的选择器。

但是，另一方面，如果网站开发人员使用选择器来编写样式，input { background: yellow; }或者#site-wrapper input { background: yellow; }我不希望它推翻我引用类的联系表单样式，.contact_input { background: white; }

所以我的问题是，在这种情况下，最佳实践是什么？我正在考虑在我的表单上添加一个 ID 并将其添加到每个选择器中，这样我的选择器就会变成#contactform .contact_input { background: white; }，我认为这可以避免冲突，但我想知道是否有更好的方法来做到这一点，因为这在页面渲染方面似乎有点低效。也许这没什么大不了的，但我只是想我会把它扔在那里，看看人们怎么想。

4

7 回答 7

4

这是一个非常困难的原因，选择器本身及其在工作表中的位置确实很重要。此外，没有唯一一种真正的 CSS 编写方式这一事实也无济于事。

我想如果你使用 ID 和标签选择器会是最好的。另外使用属性选择器：

#contact-form input { ... }
#contact-form input[type=email] { ... }
#contact-form select { ... }

但是您应该提到，强烈建议将该表放在其他表的顶部，例如：

<link type="stylesheet" href="/styles/contact-form.css" />
<link type="stylesheet" href="/styles/main.css" />

为什么采用这种方法？

通常开发人员会希望表单在整个网站上看起来都一样，这就是他将使用标签名称选择器的原因：

input  { ... }
select { ... }

这些选择器较弱，#contact-form input因此它们不会覆盖任何内容。然而，有时有必要覆盖一些规则，以便开发人员使用#contact-form input选择器，这在这种情况下是很自然的。

如果作为建议附加了工作表，则表示开发人员的样式将覆盖您的样式，尽管两者都具有完全相同强度的选择器。这就是为什么规则的位置很重要。

于 2010-12-19T14:45:57.957 回答
1

我想你已经在这个问题上回答了你自己的问题：

#contactform .contact_input { background: white; }

CSS！

于 2010-12-23T13:59:18.627 回答
0

你最好的选择是使用类似于以下的模式：

input.JSCF_formInput{
   color: white !important;
   ...
}

这样你的风格是独一无二的 {JSCF for Josiah Sprauge 联系表} 并且具体并指定为重要......

于 2010-12-15T17:42:07.523 回答
0

#site-wrapper input { background: yellow; }[...]我不希望它推翻我的联系表格样式，这些样式是指类，.contact_input { background: white; }

如果您使用这些选择器，您基本上不能：#ids 比.classes 更具体，仅此而已。我建议您#site-wrapper从第一条规则中删除选择器位，因为它是通用的。

于 2010-12-19T14:31:00.960 回答
0

我想你应该采用一种“命名空间”模式。

例如，从你所有的样式开始#ds_contactform，并使它们尽可能具体，而不会弄乱语义和方便的代码维护。

我不认为使用特定的选择器（带有 #id 甚至多个 id）是无效的。

PS 我还推荐 Andy Clarke 的精彩文章CSS：Specificity Wars。

于 2010-12-19T15:09:35.843 回答
0

你可以考虑使用BEM方法，它有非常棒的类命名风格，可以在很多方面解决特殊性问题。

于 2016-09-24T22:29:04.293 回答
-2

如果您使用 !important，它将始终覆盖与 ID 或类相关的样式。查看此链接以获取更多信息；
http://www.electrictoolbox.com/using-important-css/

您可以查看此链接以获取有关特异性的更多信息； http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2010-12-24T07:07:10.487 回答