目录
1. 层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 20px;
width: 200px;
/* 但是,没有冲突的效果不会覆盖 */
border: 10px red solid;
background-color: aqua;
}
/* 就近原则:样式离结构近的显示的就是该样式, */
div {
height: 120px;
width: 1200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. 继承性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>zhexie
/* 一般继承 color,font-,text-,line-这些样式 */
div {
font-size: 60px;
font-family: 'Courier New', Courier, monospace;
color: blueviolet;
width: 400px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<div><p>子承父业</p></div>
</body>
</html>
行高的继承性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性2</title>
<style>
body {
/* 行高为 20*1.5 px */
font: 20px/1.5 Microsoft YaHei;
}
</style>
</head>
<body>
<div>
<ul>
<!-- 没有设置字体大小及行高,会自动继承大小及行高,若有大小无行高,则继承行高 -->
<li>这是继承性的演示</li>
</ul>
</div>
</body>
</html>
3. 优先性
注意:
权重叠加:
4. 案例
将有/无序列表第一行改变颜色并加粗;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ul {
color: aqua;
}
li {
color: #000;
}
/* 以上是 黑色 */
.ul li {
color: blue;
}
/* 以上是蓝色 */
/* 只第一行是红色 */
.ul .li1 {
color: brown;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="ul">
<li class="li1">111</li>
<li class="li2">222</li>
<li class="li3">333</li>
<li class="li4">444</li>
<li class="li5">555</li>
</ul>
</body>
</html>