css样式的优先级分为引入优先级和声明优先级。
引入优先级
引入样式一般分为外部样式,内部样式,内联样式。
外部样式:使用link引入的外部css文件。
内部样式:使用style标签书写的css样式。
内联样式:直接书写在html标签里面的css样式。
优先级如下:
内联样式 > 外部样式 = 内部样式
外部样式优先级和内部样式优先级相同,故写在后面的样式会覆盖前面的样式。
声明优先级
一般优先级如下:
- !important > 内联 > ID > Class|属性|伪类 > 元素选择器
- :link、:visited、:hover、:active 按照LVHA顺序定义
优先级算法:
等级 | 内联选择器 | ID选择器 | 类选择器/属性选择器/伪类 | 元素选择器 |
---|---|---|---|---|
示例 | <span style="color:red;"></span> | #sp{color:red} | .sp{color:red} [type="text"]{color:red} :nth-of-type(1){color:red} | span{color:red} |
优先级 | 1-0-0-0 | 0-1-0-0 | 0-0-1-0 | 0-0-0-1 |
注意:
**通配符 * 的优先级为 0-0-0-0,但是优先级大于继承样式优先级。++
优先级算法示例:
Document 第一条应该是黄色