三. 层叠和继承
- 继承
父元素拥有了某个css属性，子元素不需要任何条件的情况下都会拥有父元素的属性。
并不是所有的css属性都能继承，可以被继承的css属性有以下：
color text- line- font- -->都是跟文字属性相关。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
color: red;
}
.d1 span {
font-size: 100px;
}
</style>
</head>
<body>
<div class="d1">
<!-- span继承了div.d1的color属性 -->
<span>Hello,span</span>
</div>
</body>
</html>
其它的关于盒子、定位、布局的属性不能被继承。
- 层叠
是css处理冲突的一种解决方案。需要通过计算权重 来解决层叠的问题。
计算权重的第一步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第一步比较id class html 选择器的数量*/
#d1 .d2 p {
color: red;
}
/*1 1 1*/
div div #d3 p {
color: green;
}
/*1 0 3*/
div.d1 div.d2 div.d3 p {
color: blue;
}
/*0 */
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果：
计算权重的第二步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第二步，如果权重一样，那么后出现的会覆盖掉先出现的*/
#d1 #d2 p {
color: red;
}
#d2 #d3 p {
color: blue;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果：
计算权重第三步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*比较权重第三步：看选择器是否直接选中目标元素，如果没有选中目标元素，那么他们的权重为0*/
#d1 #d2 #d3 {
color: red;
}
div.d1 div.d2 div.d3 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果：
计算权重第四步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第四步：如果都没有选中，那么谁离目标元素近就听谁的*/
#d2 #d3 {
color: red;
}
#d1 #d2 {
color: blue;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果：
总结
- 先看有没有选中目标元素，如果选中，比较权重，谁的权重大听谁的。如果权重一样，谁写在后面听谁的。
- 如果没有选中目标元素，那么权重为0，如果所有的权重都为0，就近原则，谁离目标元素近听谁的。
