为什么属性选择器比类有更高的特异性？

为什么下面例子中的input[type=number]选择器会覆盖.num类选择器？不应该都具有1的特异性？为什么属性选择器比类有更高的特异性？

我的期望是后面宣布的任何一个都会覆盖前者。

HTML：

<input type="number" class="num">

CSS：

input { 
    width: 100px; 
} 

input[type=number] { 
    border: 2px solid #c0ffee; 
} 

.num { 
    border: 2px solid #c55; 
}

https://jsfiddle.net/m3ftm4k3

来源

2017-06-12 dclem

在您的问题中发布您的代码示例，而不是jsFiddle – j08691

我更新了帖子 – dclem

使用特定计算器，如https://specificity.keegan.st/。 – 2017-06-12 14:16:36

属性选择器与CSS类选择器共享特定级别的特异性。在你的例子中，你有input[type=number]和.num。

input[type=number]具有0 0 1 1特异性，它有在它两个选择器，一元件input和属性[type=number]。
.num，具有0 0 1 0的特异性，只有一个选择器，类。

由于input[type=number]比.num具有更高的特异性，它的风格将永远胜出，无论放置。如果input[type=number]更改为[type=number]，则放置会发挥作用，因为它们都具有0 0 1 0的特异性，后者将胜出。

input { 
 
    padding: 0.25em 0.5em; 
 
} 
 

 
/* Specificity - 0, 0, 1, 1 */ 
 
input[type="number"] { 
 
    border-style: dotted; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
[type="number"] { 
 
    border: 1px dashed indianred; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
.num { 
 
    border-color: rebeccapurple; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
[type="number"] { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
}

<input type="number" class="num" name="number" value="0">

*注：我只使用了相同的CSS选择器两次演示目的。注意哪个border-style胜出。尽管在dotted之后试图应用dashed和solid，但由于特异性，两者均未应用。当特异性值相同时，应用哪个规则的层叠结构。

来源

2017-06-12 13:50:20 hungerstar

切换这一个最好的答案，因为我认为这将是更有帮助任何其他人有同样的问题 – dclem

为什么属性选择具有比类更高的特异性？

他们没有。属性和类选择器都具有0,0,1,0的特异性。

为什么下面例子中的input[type=number]选择器会覆盖.num类选择器？不应该都具有1的特异性？

类型选择器（input）+属性选择器（[type=number]）的特异性为0,0,1,1。

来源

2017-06-12 13:49:32 Quentin

谢谢。 'input [class = num]'方便地比'.num'更好，因为它和'input [type = number]'具有相同的特性' – dclem

你也可以使用'input.num'，这会是与'input [class = num]'相同的特性。如果要为所有数字输入设置一个基数，然后使用'.num'作为该基数的特殊修饰符，则可以使用'[type = number]'。在那个例子中，确保'.num'在'[type = number]'之后，因为两个选择器具有相同的特定值，所以它胜出。 – hungerstar

所以'input.num' – Quentin

为什么属性选择器比类有更高的特异性？

回答

相关问题