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

• input[type=number]具有0 0 1 1的特性，它有两个选择器，一个 * 元素 * input和 * 属性 * [type=number]。
• .num，具有0 0 1 0的特异性，并且只有一个选择器，一个 class。

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

个字符

*注：为了演示的目的，我只使用了两次相同的CSS选择器。 请注意哪一个border-style胜出。虽然在dotted之后尝试应用dashed和solid，但由于特异性，这两个都没有应用。级联规则（规则一个接一个）在特异性值相同时应用。

为什么属性选择器比类有更高的特异性？
属性和类选择器都有0，0，1，0的特异性。
为什么下面例子中的input[type=number]选择器覆盖了.num类选择器？两者的特异性不都应该是1吗？
一个类型选择器（input）+一个属性选择器（[type=number]）的特异性为0，0，1，1。

为了理解特异性，让我们首先了解3列特异性顺序
1.内联样式（* 优先于低于三列的样式，但一般来说，它不属于3列特性 *）

1. ID选择器（*id ex. #example *）
   1.类选择器（*class，attributes & pseudo-classes. ex. .myClass，[type="radio"]，:hover）
   1.类型选择器（ 元素和伪元素.例如p，h1，::before *）
   !important异常：如果样式具有!important标志，则无论具体性如何，重要声明都适用
   在您的示例中，属性选择器input[type='number']比类选择器.num具有更高的特异性。让我们分解每个选择器的特异性：

属性为input[type='number']的元素：

Specificity: 0, 1, 1 (one attribute selector, one element selector)

字符串

类别.num：

Specificity: 0, 1, 0 (one class selector)

型
虽然两个选择器在第二列（表示类、属性或伪类）中的特异性都是1，但属性选择器还具有类型选择器特异性1，使其特异性更高。因此，input[type='number']定义的样式将优先于类选择器.num定义的样式。
这里有一篇很好的文章来更好地理解特异性：link

默认案例

在“浮游生物、鱼类和鲨鱼的CSS特异性”示例中，number-number-number-number-number分类表示特异性值，表示CSS选择器的强度。这些数字的解释如下：

-第三个数字（位数）：浮游生物等级-0-0-1 = 1（最小影响）

• 型别选取器和虚拟项目的数目。
• 浮游生物等级是最低的。这个等级的选择器是最弱的，很容易被鱼和鲨鱼等级覆盖。在这个例子中，没有提供特定的选择器，所以数字只是表示不同的等级。实际上，选择器将是此分类的一部分。特定性值帮助CSS引擎在某个元素与多个规则匹配时确定将哪个样式规则应用于特定元素。特异性值越高，样式的优先级越高。
  -第二个数字（十位数）：鱼等级-0-1-0 = 10（比前一个更强）
• 类选择器、属性选择器和伪类的数目。
• 鱼类等级是第二高的。在这个等级的选择者比浮游生物强，但比鲨鱼弱。
  -第一个数字（百）：鲨鱼等级-1-0-0 = 100（比前一个更强）
• ID选择器的数目。
• 鲨鱼级别是绝对最强的，要想覆盖它们，至少需要同等数量的鲨鱼或者其中一种特殊情况。

特殊情况
在下一个示例中，内联style和!important是两种特殊情况，分别以“ship”和“atomic bomb”为隐喻进行说明：

-船（千）：1-0-0-0 = 1.000（比前一个更强）

• 这种特异性级别用“船”的比喻来表示，它指的是通过使用样式属性直接对元素进行样式设置而获得的特异性，它是独一无二的强大，超越了所有其他形式的特异性。
  -原子弹（万枚）：1-0- 0 - 0-0 = 10.000（比前一次更强）
• !important的特异性级别是用“原子弹”的比喻来描绘的，它是在属性之后添加到样式规则中的一个特殊标志，这个标志意味着这个规则覆盖了所有的东西，绕过了通常的特异性规则。!important是最高的特异性标志，覆盖了所有其他的样式，包括直接应用于元素的样式。因此，“原子弹”是操纵特异性值的最有力的工具。“
• 尽管它很强大，但不建议使用它，因为它会使CSS的透明度复杂化。如果我们想覆盖某个东西，让我们通过适当和细致入微地使用默认情况来完成。

x1c 0d1x的数据
如图所示，如果我们将这些元素连接起来，我们需要对每个级别的点进行求和。如果一个元素以多种方式进行样式化，则最高级别的样式化将优先。

总结

在这个问题的具体例子中，input[type=number]被证明比.num更强，因为它表示两个水平的识别：input和[type=number]。它们单独是有效的选择子，但结合在一起，它们具有更高的特异性。
如果我们在[type=number]和.num之间举一个更简单的例子，就可以理解，由于它们具有相同的特殊性，最后一个声明将占上风。

/* 0-1-0 = 10                 (searchable on the diagram: 2nd row, 3rd cell) */
[type=number] {
  border: 2px solid green;
}

/* 0-1-0 = 10                 (searchable on the diagram: 2nd row, 2nd cell) */
.num {
  border: 2px solid red; /* WIN (last highest level: 10) */
}

个字符
如果再次将这两种方法应用于输入，它们将具有相等的强度，因此，最后一种方法将再次生效。

/* input:         0-0-1 =  1  (1rd row, 2nd cell) */
/* [type=number]: 0-1-0 = 10  (2nd row, 3rd cell) */
/* Summary: 1+10 = 11                             */
/* 0-1-1 = 11                 (searchable on the diagram: 3rd row, 2nd cell) */
input[type=number] {
  border: 2px solid green;
}

/* input:         0-0-1 =  1  (1rd row, 2nd cell) */
/* .num:          0-1-0 = 10  (2nd row, 2nd cell) */
/* Summary: 1+10 = 11                             */
/* 0-1-1 = 11                 (searchable on the diagram: 3rd row, 1st cell) */
input.num {
  border: 2px solid red; /* WIN (last highest level: 11) */
}

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

的字符串
但是在这个问题中，只有[type=number]收到了更强的定义，因此，单独使用.num可能不足以进行重写。

/* input:         0-0-1 =  1  (1rd row, 2nd cell) */
/* [type=number]: 0-1-0 = 10  (2nd row, 3rd cell) */
/* Summary: 1+10 = 11                             */
/* 0-1-1 = 11                 (searchable on the diagram: 3rd row, 2nd cell) */
input[type=number] {
  border: 2px solid green; /* WIN (11 > 10) */
}

/* 0-1-0 = 10                 (searchable on the diagram: 2nd row, 2nd cell) */
.num {
  border: 2px solid red;
}

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

的字符串

简而言之，这是因为你的CSS更具体的输入类型。
input或.num或[type="input"]的样式本身具有相同的权重，因为它们只是在寻找一个选择器-一个标识属性。
input[type=number]用于 * 两个 * 选择器的组合，因此它最终更具体。

类型选择器（input、div等）的特异性低于属性选择器（input[type=number]）。类选择器（.num）的特异性低于属性选择器（input[type=number]）。
在您的案例中：input[type=number]选择器比.num类选择器具有更高的特异性，因为属性选择器（[type=number]）比类选择器具有更大的权重。尽管两个选择器在选择器数量方面的特异性都为1，类型属性选择器（input[type=number]）优先于类选择器（.num），因为属性选择器比类选择器具有更高的特异性。因此，即使.num类选择器稍后在CSS中声明，input[type=number]选择器将优先，因为它基于属性选择具有更高的特异性。
如果你想让.num类选择器覆盖**input[type=number]**样式，你需要增加它的特异性，或者通过添加更多的类选择器，或者使用一个更具体的选择器，目标是.num类的输入元素：

input {
  width: 100px;
}

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

/* Increase specificity for .num to override input[type=number] */
input.num {
  border: 2px solid #c55;
}

字符串
通过组合input和.num类选择器，可以增加规则的特殊性，允许它覆盖**input[type=number]**选择器。

属性选择器与CSS类选择器共享相同级别的特异性
这取决于属性和类是否由元素限定。
考虑
属性[data-foo="underline"]特异性：[0，1，0]
类.underline特异性：[0，1，0]
属性（用元素限定）u[data-foo="underline"]特异性：[0，2，0]
类（用元素限定）u.underline特异性：[0，2，0]
因此，基本上，属性（不使用元素选择器限定）将与类（不使用元素选择器限定）具有相同的特异性。
属性（用元素选择器限定）将具有与类（用元素选择器限定）相同的特异性
但是，如果属性“属性”或类“属性”由元素“属性”限定，则它们将不具有相同的特异性