继承性
文本相关的属性普遍具有继承性,只需要给先祖标签设置,即可在后代所有标签中生效。
如:color
font-开头的
list-开头的
text-开头的
line-开头的
因为文字相关属性有继承性,所以通常会设置body标签的字号,颜色。行高,这样就能当做整个网页的默认样式了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
color:red;
font-size:50px;
font-family:'Times New Roman', Times, serif;
font-weight:bold;
line-height:100px;
text-decoration:none;
text-align:center;
font-style:italic;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
就近原则
在继承的情况下,选择器权重计算失效,使用"就近原则”
如果都没有选中文本标签,看谁更近听谁的,,如果一样近,再通过比较权重进行判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 #box2 #box3 {
color:red;
}
/* p {
color:green;
} */
.box1 .box3 {
color:blue;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p>我是文章</p>
</div>
</div>
</div>
</body>
</html>