css权重

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

​