CSS 输入（按钮）边框特异性
据我了解，类的样式应优先于元素样式。我尝试过设置 button、input[type=button] 和 input[type=submit] 的样式，并注意到使用 input（button 和 submit），元素中的 border 样式将优先于 border 类的样式。然而，我没有注意到 button 元素上的这种行为。
这是演示这种情况的示例：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type=button], button {
border: none;
}
.class {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" class="class" value="With class" />
<input type="button" value="Without class" />
<button class="class">With class</button>
</body>
</html>
上面的渲染如下：
我注意到 Safari、Firefox 和 Chrome 中也有同样的行为。
我做错了什么吗？我是否误解了这种情况的特殊性？这仅特定于 border 吗？
As I understand it, a class should take precedence in styles over the element styles. I've tried to style button, input[type=button], and input[type=submit] and noticed that with the input (button and submit), the border style from the element would take precedence over the border style for the class. I did not notice this behaviour, however, on the button element.
Here's an example demonstrating the situation:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type=button], button {
border: none;
}
.class {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" class="class" value="With class" />
<input type="button" value="Without class" />
<button class="class">With class</button>
</body>
</html>
The above renders like this:
I've noticed the same behaviour in Safari, Firefox, and Chrome.
Am I doing something wrong? Have I misunderstood specificity in this case? Is this specific to border only?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你不是在比较苹果与苹果。就像类一样，属性选择器具有
0,1,0的特殊性。但是，元素选择器的特异性为0,0,1，这使得input[type="button"]的第一个选择器的特异性为0 ,1,1大于0,1,0。如果
如果您希望它们都具有相同的特异性，则应该使用：
-或-
You're not comparing apples to apples. Attribute selectors have a specificity of
0,1,0just like classes. However, element selectors have a specificity of0,0,1, which makes your first selector ofinput[type="button"]have a specificity of0,1,1which is greater than0,1,0.http://www.w3.org/TR/CSS2/cascade.html#specificity
If you wanted them both to have the same specificity, you should use:
-or-
属性选择器+元素选择器比简单的类选择器具有更高的特异性。
可能的修复：
通过这种方式，您可以将类“class”应用于具有指定类型的任何元素并实现您想要的结果。
An attribute selector + the element selector have a higher specificity than a simple class selector.
Possible fix:
this way you can apply the class "class" to any element with a type specified and achieve the results you wanted.