Question

为什么下面示例中的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

Answer 1

属性选择器与CSS类选择器具有相同的特异性级别。在您的示例中，您有input[type=number]和.num。

input[type=number]的特异性为0 0 1 1，其中有两个选择器，元素 input和属性 {{ 1}}。
[type=number]，具有.num的特异性，并且只有一个选择器，类。

由于0 0 1 0的特异性高于input[type=number]，因此无论展示位置如何，它的风格总是会胜出。如果.num更改为input[type=number]，那么展示位置就会起作用，因为它们都具有[type=number]的特异性，而后者则会胜出。

＆＃13;

0 0 1 0

＆＃13;

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;
}

＆＃13;

*注意：为了演示目的，我只使用了两次相同的CSS选择器。注意哪个<input type="number" class="num" name="number" value="0">胜出。虽然尝试在border-style之后应用dashed和solid，但由于特异性，均未应用。当特异性值相同时，应用级联，其中规则接着是另一个规则。

Answer 2

为什么属性选择器的特异性高于类？

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

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

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

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

2 个答案: