CSS继承,层叠,优先级
继承
- 父元素设置样式,子元素可以继承部分属性
- 减少CSS代码
层叠
- 可以定义多个样式
- 不冲突时,多个样式可层叠为一个
- 冲突时,按不同样式规则优先级来应用样式
优先级
行内样式 > 内部样式 > 外部样式
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
-
最后定义的优先级最高(就近原则)
1
同一样式表中:
1.权值相同
就近原则(离被设置元素越近优先级越高)
2.权值不同
根据权值来判断CSS样式,那种CSS样式权值高,就使用哪种样式
选择器的权重
| 选择器 | 权重 |
|---|---|
| 标签选择器 | 1 |
| 类选择器,伪类 | 10 |
| ID选择器 | 100 |
| 通配符选择器 | 0 |
| 行内样式 | 1000 |
权值规则
- 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
#main div.warning h2{.....}
id:1 class:1 标签:2
1*100= 100 1*10=10 2*1=2
权值:100+10+2 = 112
!important规则
- 可调整样式规则的优先级
- 添加在样式规则之后,中间用空格隔开
div{color:red !important;}
命名规则
- 采用英文字母,数字以及"-"和"_"命名
- 以小写字母开头,不能以数字和"-","_"开头
- 命名形式:单字,连字符,下划线和驼峰
- 使用有意义的命名
/*一个单词,采用全部小写方式*/
.special{....}
/*多个单词*/
/*驼峰写法,除第一个但此外,其它首写字母为大写*/
.mainTitle{.....}
/*采用"-"连接符*/
.main-title{.....}
/*采用"_"下滑线*/
.main_title{.....}
1
2
3
使用
- id不用滥用,一般用于dom操作
- 少用class
