css权重
artea奶茶
我们修改css样式时,经常会看到这样:
设置的样式变成灰色,样式不生效等等问题。这可能就是没考虑好css权重问题。
权重的等级
可以把样式的应用方式分等级,按照等级来计算权重,权重高的,优先显示
分类 | 例子 | 权重值 |
---|---|---|
!important | 加在样式属性值后 | 10000 |
内联样式 | 如:style=”” | 1000 |
ID选择器 | 如:#artea | 100 |
类、伪类和属性选择器 | 如: .artea、:hover | 10 |
标签选择器和伪元素选择器 | 如:div、p、:before | 1 |
新增选择器 | 通用(*)、子(>)、相邻(+)、同胞(~) | 0 |
计算权重小题目
题目 | 权重值 |
---|---|
a{color: yellow;} | 1 |
div a{color: green;} | 1+1 |
.demo a{color: black;} | 10+1 |
#demo a{color: orange;} | 100 + 1 |
div#demo a{color: red;} | 1 + 100 + 1 |
div{ color:red !important;} | 1+10000 |
#content div.main_content h2{color:red;} | 100+1+10+1 |