css - 如何创建 "stronger"元素的 css 类？

Question

我有一个关于 CSS 类和元素的问题。假设我有类似 form input[type=submit] {...}

的东西

现在我想在一个页面上添加一个提交按钮，但外观不同。所以我创建了一个类，例如 form .button 并将 class="button" 添加到提交按钮。现在的问题是 form input[type=submit] {...} 的设置似乎更强大，因此具有类的按钮看起来相同。我该如何解决这个问题？

Answer 1

你应该使用:

form input[type=submit] {
    border: 3px solid red
}
form input.button {
    border: 3px solid blue
}

参见: http://jsfiddle.net/5pbbD/

这个问题全都与 CSS 特异性有关。参见 this article和 the CSS spec .

• form input[type=submit] 比 form .button 具有更高的特异性，所以这就是您遇到此问题的原因。
• 我已将第二个选择器 (form .button) 更改为 form input.button，这已经足够具体了。我的回答中的两个选择器实际上具有相同的特异性，因此归结为它们被定义的顺序。