在编写css的时,有时会遇到添加的样式无效,现对css权重问题做一个总结。
优先级
通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式-
优先级计算
元素, 伪元素: 1 – (0,0,0,1)
类, 伪类, 属性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
内联样式: 1 – (1,0,0,0)可以理解为:每条样式的权重值就是该样式所包含的所有选择器相对应的权重值之和: 元素,伪元素:+1 类,伪类,属性:+10 ID:+100 内联样式:+1000 例如: p {} //p为元素,总权重就是:1 div p{} //p与div都是元素,总权重是:1=1=2 .div p // .div是类,p是元素,总权重是:10+1=11
有个例外!!!
!important 允许开发人员强制应用某样式,例如:
img { width: 150px !important;}