CSS的三大特性
2021-01-21 本文已影响0人
周星星的学习笔记
CSS中有三个非常重要的特性，分别是：层叠性、继承性、优先级
一、层叠性
1.定义
层叠性是指：相同选择器给设置相同的样式，这个时候一个样式就会覆盖另一个冲突样式，层叠性主要解决样式冲突的问题。
2.原则
① 样式冲突，执行就近原则，哪个样式离结构近就执行哪个样式。
② 样式不冲突，不会层叠。
3.示例
<!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 {
width: 200px;
height: 200px;
background-color: hotpink;
}
/* 由于此选择器离下面的div结构近，所以将会覆盖掉上面的background-color属性 */
div {
background-color: indigo;
}
</style>
</head>
<body>
<div>
123
</div>
</body>
</html>
image.png
二、继承性
1.定义
继承性是指：子标签会继承父标签的某些样式，如：文本颜色和子号，简单理解就是：“子承父业”。
2.特性
① 恰当地使用继承性可以简化代码，减低CSS样式的复杂性。
② 子元素可以继承父元素的样式（text-、font-、line-、这些元素开头的可以继承，以及color属性）
3.示例
<!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 {
font-size: 18px;
color: indigo;
}
</style>
</head>
<body>
<div>
<p>哈罗你们好啊！</p>
</div>
</body>
</html>
三、优先级
1.定义
优先级是指：当同一个元素指定多个选择器的时候，就会有优先级的产生，也就是说：当出现这种情况的时候，会按照一定的原则，优先采用哪个选择器指定的样式进行页面的渲染。
2.原则
优先级按照如下表格所示，权重从上到下越来越大，也即优先级越来越高。
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style | 1,0,0,0 |
| !important重要的 | ∞无穷大 |
3.示例
<!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 {
color: indigo;
/* color: indigo !important; */
}
.test {
color: lawngreen;
}
#demo {
color: lightpink;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color:red;">
哈罗你们好吗？
</div>
</body>
</html>
4.优先级的注意点
① 权重是有4组数字，但是不会有进位
② 可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推...
③ 等级判断从左至右，如果某一位数值相同，则判断下一位数值
④ 可以简单记忆法：通配符和继承权重为0，标签选择器权重为1，类（伪类）选择器权重为10，ID选择器权重为100，行内样式表权重为1000，!important权重为无穷大。
⑤ 继承的权重为0，如果该元素没有直接被选中，不管父元素权重多高，子元素得到的权重都是0。
5.权重的叠加
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
<!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 li 选择器权重为(0,0,0,1 + 0,0,0,1) = 0,0,0,2 */
ul li {
color: seagreen;
}
/* li选择器的权重为 0,0,0,1 */
li {
color: red;
}
/* .nav li 选择器的权重为( 0,0,1,0 + 0,0,0,1 ) = 0,0,1,1 */
.nav li {
color: skyblue;
}
</style>
</head>
<body>
<ul class="nav">
<li>刘德华</li>
<li>张学友</li>
<li>郭富城</li>
<li>黎明</li>
</ul>
</body>
</html>
