CSS布局基础(六)--继承、层叠
2020-05-04 本文已影响0人
Caesar_emperor
一、继承性质
最简单的例子就是
<style type="text/css">
body{font-size:12px;}
</style>
<!--定义body样式，这样全部body内的都会作用于该CSS样式-->
<!--元素本身包含了冲突样式，一般会忽略继承性，对标签的直接设置优先级高于继承性-->
CSS强制规定了部分属性不具有继承性
- 边框
- 边界
- 补白
- 背景
- 定位属性
- 布局属性
- 元素宽高属性
二、CSS层叠性
<!--跟样式的先后顺序有关系，这里字体将为14px-->
<style type="text/css">
div{font-size:12px;}
div{font-size:14px;}
</style>
<div id="wrap"></div>
三、CSS优先级
！important关键字附加后，会拥有最高优先级
1.CSS样式表优先级
网页定义的样式分为4种：HTML、作者、用户、浏览器
- HTML是元素的默认样式
- 作者是创建人，即创建用户所编辑的CSS
- 用户就是浏览网页的人所设置的样式
- 浏览器就是指浏览器默认的样式
2.CSS样式的优先级
不同位置的样式优先级也不同：
- 行内(内嵌)样式优先于内部样式表(style css)
- 内部样式表优先于外部样式表(导入的CSS)
四、CSS特殊性
是指不同类型的选择器
- 被继承的样式权重值为0
- 标签选择器：权重值为1
- 伪元素或伪对象选择器：权重值为1
- 类选择器：权重值为10
- 属性选择器：权重值为10
- ID选择器：权重值为100
- 其它选择器：权重值为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
1.继承样式的优先级
**这里提一句，比如当body内设置了span标签，内部样式表也设置了span，虽然继承了内部样式表，权重是0，但内部设置的样式表优先级是大于继承而来的
<style type="text/css">
span{color:Gray;}
#header{color:Black;}
</style>
<div id="header" class="blue">
<span>hello</span>
</span>
<!--字为灰色-->
2.行内样/属性样式的优先级
样式属性最优先，权重值100或更高
五、!important
优先级最高
<!--外部样式表-->
#header{
color:Red!important
}
<!--内部样式表-->
<style type="text/css">
#header{color:Gray;}
</style>
</head>
<body>
<div id="header" style="color:Yellow">文件测试</div>
</body>
