css三大特点
继承:即子级类元素继承父类的样式;
优先级:是指不同类别样式的权重比较;
层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。
首先来看一下css选择器优先级 (css选择器的权值)
css选择器的优先级:作用的元素一样,样式一样,就会有优先级问题。
通配选择器:0权值; (如:*)
标签名选择器:1权值;(如:div,body,span,p,ul,li)
类名选择器:10权值; (如:class="head",class="head_logo")
id选择器:100权值;(如:id="name",id="name_txt")
内联样式表:1000权值;
后代选择器:选择器1 选择器2....(会有相加的过程)
群组选择器:选择器1,选择器2....(不会有相加的过程)
1.相同类型选择器,样式冲突下,后面的代码覆盖前面的代码。
2.不同类型的选择器,样式冲突下,优先级高的覆盖优先级低的。
3.* < Tags < class < id < style < !important
4. ! important慎用!【优先级最高,谁也覆盖不了,慎用,非得用的时候,要加上注释说明一下;它们之间的优先级是绝对的,低级的优先级累加不能超过高级的优先级。】
总结排序:!important > 行间样式 > id选择器 > 类选择器 > 标签选择器 > 通配选择器 ;
!important > style > id > class > Tags >*;
我们可以把选择器中规则对应做加法,比较权值,如果权值相同那就后面的覆盖前面的了,div.class的权值是1+10=11,而.test1 .test2的权值是10+10=20,所以div会应用.test1 .test2变成绿色