css - CSS 特异性的最佳实践？

Question

<分区>

Answer 1

这是一个相当困难的原因，因为选择器本身及其在工作表中的位置都很重要。此外，事实上并没有唯一一种真正的 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 选择器，这在这种情况下是很自然的。

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