css权重（优先级）整理
2017-07-19 本文已影响47人
WMLJS
优先级： 浏览器通过优先级来判断哪一些属性值与元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类的选择器组成的匹配规则
一般来说： 内联样式表 > 内部样式表 > 外部样式表
注意： 如果外部样式表在内部样式表下引用，则外部样式表 > 内部样式表
| 选择器类型 | 例子 | 权值 |
|---|---|---|
| 内联选择器 | style=" " | 1000 |
| ID选择器 | #id | 100 |
| 类 / 伪类 / 属性选择器 | .className / :hover / [attribute="**"] | 10 |
| 元素 / 伪元素选择器 | p / p:first-child | 0 |
css优先级规则
- 选择器都有权值，权值越大越优先。
- 权值相等时，后出现的样式表样式设置优先于先出现的
- 用户自己设置的样式 > 网页制作者样式 > 浏览器默认样式
- 继承的css样式不如后来指定的css样式
- 在同一组属性设置中标有"!important"规则的优先 即最大
!important的例子
#example {
font-size: 14px !important;
}
#example {
font-size: 10px;
}
最终id为example的元素的font-size为14px
