CSS有哪些基本选择器，权重是如何表示的
CSS选择器用于选择需要应用样式的HTML元素。选择器的类型和组合方式决定了样式的优先级（权重）。以下是CSS的基本选择器及其权重表示方法：
1. 基本选择器
1.1 元素选择器
- 作用：根据HTML标签名称选择元素。
- 语法：
元素名 { } - 示例：
p { color: blue; }
1.2 类选择器
- 作用：根据元素的
class属性选择元素。 - 语法：
.类名 { } - 示例：
.text-red { color: red; }
1.3 ID选择器
- 作用：根据元素的
id属性选择元素。 - 语法：
#id名 { } - 示例：
#header { background-color: yellow; }
1.4 通配选择器
- 作用：选择所有元素。
- 语法：
* { } - 示例：
* { margin: 0; }
1.5 属性选择器
- 作用：根据元素的属性选择元素。
- 语法：
[属性名] { } [属性名="值"] { } - 示例：
[type="text"] { border: 1px solid #ccc; }
1.6 伪类选择器
- 作用：根据元素的状态或位置选择元素。
- 语法：
:伪类 { } - 示例：
a:hover { color: green; }
1.7 伪元素选择器
- 作用：选择元素的特定部分。
- 语法：
::伪元素 { } - 示例：
p::first-line { font-weight: bold; }
2. 组合选择器
2.1 后代选择器
- 作用：选择某个元素的后代元素。
- 语法：
A B { } - 示例：
div p { font-size: 16px; }
2.2 子选择器
- 作用：选择某个元素的直接子元素。
- 语法：
A > B { } - 示例：
div > p { color: red; }
2.3 相邻兄弟选择器
- 作用：选择某个元素的相邻兄弟元素。
- 语法：
A + B { } - 示例：
h1 + p { margin-top: 0; }
2.4 通用兄弟选择器
- 作用：选择某个元素的所有后续兄弟元素。
- 语法：
A ~ B { } - 示例：
h1 ~ p { color: blue; }
3. 选择器权重
选择器的权重决定了样式的优先级。权重由四个部分组成，分别是：
- 内联样式：
(1, 0, 0, 0) - ID选择器：
(0, 1, 0, 0) - 类/属性/伪类选择器：
(0, 0, 1, 0) - 元素/伪元素选择器：
(0, 0, 0, 1)
权重从左到右比较，数值大的优先级高。
权重计算示例：
#header .nav li a { } /* 权重：(0, 1, 1, 2) */
.nav li a { } /* 权重：(0, 0, 1, 2) */
a { } /* 权重：(0, 0, 0, 1) */
4. 特殊规则
4.1 !important
- 作用：提升样式的优先级，覆盖其他规则。
- 示例：
p { color: red !important; }
4.2 继承样式
- 作用：继承的样式权重最低，低于任何直接应用的样式。
- 示例：
body { color: blue; /* 继承样式 */ } p { color: red; /* 直接样式 */ }
4.3 相同权重
- 规则：当权重相同时，后定义的样式优先。
- 示例：
p { color: red; } p { color: blue; /* 最终应用 */ }
总结
| 选择器类型 | 示例 | 权重 |
|---|---|---|
| 内联样式 | style="color: red;" | (1, 0, 0, 0) |
| ID选择器 | #header | (0, 1, 0, 0) |
| 类/属性/伪类选择器 | .nav, [type="text"], :hover | (0, 0, 1, 0) |
| 元素/伪元素选择器 | p, ::before | (0, 0, 0, 1) |
| 通配选择器 | * | (0, 0, 0, 0) |
| 继承样式 | 继承的样式 | 最低 |
通过合理使用选择器和权重规则，可以精确控制样式的优先级和应用范围。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
