继承，层叠，优先级
2021-11-16 本文已影响0人
Caesar_emperor
一.层叠
<!--跟样式的先后顺序有关系，这里字体将为14px-->
<style type="text/css">
div{font-size:12px;}
div{font-size:14px;}
</style>
<div id="wrap"></div>
二.继承
<style type="text/css">
body{font-size:12px;}
</style>
<!--定义body样式，这样全部body内的都会作用于该CSS样式-->
<!--元素本身包含了冲突样式，一般会忽略继承性，对标签的直接设置优先级高于继承性-->
<!--对于文字相关的，比如字号，行高等会继承-->
2.1 继承失效
父标签的颜色->a->继承失败(被浏览器默认样式覆盖)->只能对a单独赋值
父标签的颜色->h->继承失败(被浏览器默认样式覆盖)->只能对h单独赋值
div高度不能集成，宽度有类似继承效果，宽度和父元素一样宽
三.优先级
1.CSS样式的优先级
不同位置的样式优先级也不同：
行内(内嵌)样式>内部样式表>外部样式表(导入的CSS)
2.CSS特殊性
是指不同类型的选择器
- 被继承的样式权重值为0（继承<通配符*<标签）
- 标签选择器：权重值为1（0，0，0，1）
- 伪元素或伪对象选择器：权重值为1（0，0，0，1）
- 类选择器：权重值为10（0，0，1，0）
- 属性选择器：权重值为10（0，0，1，0）
- ID选择器：权重值为100（0，1，0，0）
- 其它选择器：权重值为0，如通配选择器
以上面权值数为起点来计算每个样式中选择器的总权值数，计算规则是 - 统计ID选择器的个数，然后乘以100
- 统计选择器中类选择器个数，然后乘以1
- 统计选择其中标签选择器个数，然后乘以1
以此类推，最后把所有权值数相加，即得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。每个数字依次比较。
<style type="text/css">
body div#box{boder:solid 2px red;}
#box{border:dashed 2px blue;}
div.red{border:double 3px red;}
</style>
<div id="box" class="red">CSS</div>
body div#box=1+1+100
#box=100
div.red=1+10
div h2=1+1
.red=10
在看优先级时，先看该样式选择器是否是继承的。如果id是继承下去的，那也要靠边站
四.!important--只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
<!--最高优先级，这里字体大小设置为13px-->
<!--继承的优先级是最低的，!important依旧无法提升它的权重-->
<style type="text/css">
div{font-size: 13px !important; }
div{font-size: 40px;}
</style>
</head>
<body>
<div>test</div>
</body>
