Question

据我了解，类应该优先于样式而不是元素样式。我尝试设置button，input[type=button]和input[type=submit]，并注意到input（button和submit），{ {1}}元素的样式优先于类的border样式。但是，我没有在border元素上注意到这种行为。

以下an example展示了这种情况：

button

以上呈现如下：

我在Safari，Firefox和Chrome中注意到了相同的行为。

我做错了吗？在这种情况下，我是否误解了特异性？这仅针对<!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>吗？

Answer 1

你不是在比较苹果和苹果。属性选择器具有0,1,0的特异性，就像类一样。但是，元素选择器的特异性为0,0,1，这使得input[type="button"]的第一个选择器的特异性为0,1,1，大于0,1,0。

http://www.w3.org/TR/CSS2/cascade.html#specificity

如果您希望它们具有相同的特异性，则应使用：

input.class
input[type="button"]

-OR -

.class
[type="button"]

Answer 2

属性选择器+元素选择器具有比简单类选择器更高的特异性。

可能的解决方法：

.class, .class[type] {
    border: 1px solid red;
}

通过这种方式，您可以将类“class”应用于指定类型的任何元素，并获得您想要的结果。

CSS输入（按钮）边界特异性

2 个答案: