4-css的三大特性¶
继承¶
子元素继承父元素样式,主要是字体相关的样式。
层叠¶
后面的样式会覆盖前面的样式,要解决样式冲突,需要用到优先级。
优先级¶
| 选择器类型 | 示例 | 权重值 | 优先级说明 |
|---|---|---|---|
| !important | color: red !important; |
无限大 | 强制覆盖所有规则(慎用) |
| 内联样式 | <div style="color: red"> |
(1, 0, 0, 0) | 行内样式权重最高 |
| ID 选择器 | #myId |
(0, 1, 0, 0) | 每个 ID 增加 0,1,0,0 |
| 类/属性/伪类 | .class, [type="text"] |
(0, 0, 1, 0) | 每个类/属性/伪类增加 0,0,1,0 |
| 类型(标签)/伪元素 | div, ::after |
(0, 0, 0, 1) | 每个标签/伪元素增加 0,0,0,1 |
| 通配符/继承 | *, 继承的样式 |
(0, 0, 0, 0) | 通配符和继承权重最低 |
!important 在设置表格第一行时,可以强制覆盖所有规则