关键词：选择器权重
作者备注
这个是一个非常贼的问题， 可能很多都只是知道， 【类选择器、属性选择器和伪类选择器】 都为为一样的， 但是并不知道 【类选择器、属性选择器】之间还有优先级关系
在 CSS 中，类选择器的权重高于属性选择器。
一、权重计算规则
CSS 的权重是一个用于确定当多个选择器应用于同一元素时，哪个样式规则将被应用的概念。权重是通过一个四位数字表示的，分别对应不同类型的选择器：
- 内联样式：权重为 1000。例如，通过 HTML 元素的
style属性设置的样式。 - ID 选择器：权重为 0100。
- 类选择器、属性选择器和伪类选择器：权重为 0010。
- 元素选择器和伪元素选择器：权重为 0001。
通配符选择器（*）的权重为 0000。
二、类选择器与属性选择器的比较
-
类选择器：使用点号（
.）后跟类名来选择元素。例如，.my-class选择所有具有class="my-class"的元素。- 类选择器在 CSS 中非常常用，因为它们可以方便地对一组具有相同特征的元素应用相同的样式。
- 由于类选择器的权重为 0010，相对较高，所以在与权重较低的选择器发生冲突时，类选择器的样式通常会被应用。
-
属性选择器：根据元素的属性来选择元素。例如，
[type="text"]选择所有type属性为text的元素。- 属性选择器可以提供更具体的选择方式，但相对来说使用频率可能不如类选择器高。
- 属性选择器的权重也为 0010，与类选择器相同。然而，在实际应用中，如果同时存在类选择器和属性选择器，并且它们的特异性相同，通常类选择器会优先被应用。
-
加上指定元素的 - 属性选择器。 例如
input[type="text"]具体性导致的优先级差异,input[type="submit"]比[type="submit"]更具体。具体性在 CSS 优先级判断中是一个重要因素。具体性越高的选择器通常具有更高的优先级, 它的优先级比 类选择器更高。
综上所述：【加上指定元素的属性选择器】> 【类选择器】>【属性选择器】
三、示例说明
以下是一个示例代码，展示了类选择器和属性选择器的权重比较：
<!DOCTYPE html>
<html>
<head>
<style>
/* 加上指定元素的 - 属性选择器 */
input[type="text"] {
background-color: red;
}
/* 普通属性选择器 */
[type="text"] {
background-color: yellow;
}
/* 类选择器 */
.text-input {
background-color: blue;
}
</style>
</head>
<body>
<input type="text" class="text-input" />
</body>
</html>在这个例子中，<input>元素同时匹配属性选择器input[type="text"]和类选择器.text-input。 展示的颜色为红色。 如果注释掉 【加上制定元素的属性选择器】， 展示的颜色为 blue , 优先级高于【普通属性选择器】。
综上所述，在 CSS 中，类选择器的权重高于属性选择器。但在实际应用中，还需要考虑选择器的特异性和其他因素，以确保正确的样式被应用到元素上。