css继承性和层叠性
程序员文章站
2022-06-04 14:41:42
...
1.继承性
首先我们要明白一点，并不是所有的属性都能继承。
那么，究竟哪些属性可以继承呢？
很简单，color、text-开头的、line-开头的、font-开头的，这些关于文字样式的，都能继承；所有关于盒子的、定位的、布局的属性，都不能继承。
另外，继承性是从自己贯穿到最小的元素。
举个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.t{
color:red;
}
</style>
</head>
<body>
<div class="t">
<div>good
<div>
<p>great</p>
</div>
</div>
</div>
</body>
</html>
div.t的下一级<div>good</div>和<p>great</p>,都是div.t里的，style中虽然只定义了div.t{color:red;}样式，并没有直接定义<div>good</div>和<p>great</p>的样式，但是由于CSS具有继承性，所以结果是显示红色的good和红色的great。
![E][email protected]%)7P`0P7S.png
2、层叠性
层叠性指的是css处理冲突的能力，比如
.box1{color: red;}
.box1 #t3{color: green;}
当同一元素同时被两个冲突的属性描述的时候，它究竟听谁的？
那么这个时候，就需要知道以下几句话：
1）先看有没有直接选种元素，如果选中了，那么以（id数，类数，标签数）来计算权重（x,y,z),谁大听谁的，如果一样，谁写在后听谁的。
2）如果没有直接选中元素，那么权重为0，这时候就按照就近原则，谁描述的深，就听谁的。如果描述一样深，这时候再回头比权重。如果这时候权重在一样，那么这时谁写在后面就听谁的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*下面这种情况显示是绿色，都没有选中元素，权重均为0，但是.box1 #t3描述的更深
.box1{
color: red;
}
.box1 #t3{
color: green;
}
*/
/*下面这种情况显示是红色，第一个权重为（0，0，1），第二个权重为0.
p{
color: red;
}
.box1 #t2 div{
color: green;
}*/
/*下面这是红色，没有选择元素，权重为0，此时，描述深度又一致，再比较权重
div.box1 #t3{
color: red;
}
.box3{
color: green;
}*/
/*下面这个是你绿色，没有选择元素，权重为0，描述深度一致，
再比较权重还是一样（1,1,1），这时谁在后面听谁的*/
div.box1 #t3{
color: red;
}
#t2 div.box3{
color: green;
}
</style>
</head>
<body>
<div class="box1" id="t1">
<div class="box2" id="t2">
<div class="box3" id="t3">
<p>是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
下一篇： 奇葩的JS数组