CSS继承,层叠,优先级

继承

1. 父元素设置样式,子元素可以继承部分属性
2. 减少CSS代码

层叠

• 可以定义多个样式
• 不冲突时,多个样式可层叠为一个
• 冲突时,按不同样式规则优先级来应用样式

优先级

行内样式 > 内部样式 > 外部样式

1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

2. 最后定义的优先级最高(就近原则)

   
   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