层叠性
原则：
- 样式冲突，遵循就近原则，也就是执行最后一个样式
- 样式不冲突的不会层叠，比如只冲突color，而选择器里其他样式还是按正常流程选择。
<!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>层叠性</title>
<style>
div {
color: red;
font-size: 100px;
}
div {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<div>测试</div>
</body>
</html>
结果演示
继承性
原则：
- 子标签在没有指定某样式的情况下会继承父标签的某样式，如文本颜色和字号。
- 只能继承的样式有text-、font-、line-、这些元素开头的，以及color属性。
<!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>继承性</title>
<style>
div {
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<div>
<p>
测试
</p>
</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>行高的继承</title>
<style>
body {
color: red;
/*字号大小为30，行高为24*/
/*font: 30px/24px;*/
/*这个行高就是当前文字大小14px的1.5倍，也就是当前div的行高是21px*/
font: 30px/1.5;
}
div {
font-size: 14px;
}
</style>
</head>
<body>
<div>测试1</div>
<p>测试2</p>
</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>优先级</title>
<style>
.test {
color: red;
}
div {
color: blue;
/*级别最高
color: blue !important;
*/
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: pink;">测试</div>
</body>
</html>
结果演示
注意：继承的权重是0，不管父元素权重多高，子元素得到的权重都是0，具体请看下面代码
、
<!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>继承权重</title>
<style>
/*父亲的权重是100*/
#fat {
color: red;
}
/*p继承的权重还是0，故按照元素权重来比较，也就是看单独选出来的元素权重*/
p {
color: blue;
}
</style>
</head>
<body>
<div id="fat">
<p>测试</p>
</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>权重叠加</title>
<style>
/*复合选择器会有权重叠加问题
权重只会叠加，不会有进位的，而且叠加的是样式（原理和第一个一样：样式不冲突的不会层叠，比如只冲突color，而选择器里其他样式还是按正常流程选择）。
*/
/*ul li的权重 0,0,0,1+0,0,0,1=0,0,0,2*/
ul li {
color: green;
}
/*li 的权重为0,0,0,1*/
li {
color: red;
}
/* .na li的权重 0,0,1,0+0,0,0,1=0,0,1,1 */
.na li {
color: blue;
}
</style>
</head>
<body>
<ul class="na">
<li>测试</li>
</ul>
</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>练习</title>
<style>
/*na li 的权重是0,0,1,1*/
.na li {
color: blue;
}
/*需要把第一个li颜色改为红色加粗
na 的权重为0,0,1,0
na r的权重是0,0,2,0
*/
.na .r {
color: red;
font-weight: 800;
}
</style>
</head>
<body>
<ul class="na">
<li class="r">测试</li>
<li>测试2</li>
</ul>
</body>
</html>
结果演示
