CSS有三个非常重要的特性：层叠性、继承性、优先级
层叠性
CSS3的层叠性是指当多个样式规则应用于同一元素时，此时一个样式就会覆盖另外一个冲突的样式，浏览器会按照特定的规则来决定哪个样式规则应该被优先应用。这种规则被称为“层叠顺序”。
层叠性的原则：
- 样式冲突，遵循的原则就是就近原则，哪个样式规则离结构比较近，就会执行哪个样式
- 样式不冲突，不会层叠
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
font-size: 20px;
}
</style>
<style type="text/css">
p {
font-size: 30px;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
在这个例子中，有两个样式规则都应用于p元素，一个设置font-size为20px，另一个设置font-size为30px。根据CSS3的层叠顺序，最终应用的样式规则是第二个，因为它离p元素更近。
因此，这段代码的输出结果是一个字体大小为30px的段落。
继承性
CSS3的继承性是指某些属性的值会被子元素继承自父元素。这些属性包括字体、颜色、行高、文本方向、可见性、文本装饰、文本对齐等。而一些属性并不具有继承性，比如背景图片、边框、外边距、内边距等。
继承性可以减少代码量，使得CSS代码更简洁，同时也使得网页风格更加统一。
HTML代码：
<div id="parent">
<p>这是父元素的文本</p>
<p class="child">这是子元素的文本</p>
</div>
CSS代码：
#parent {
font-size: 20px;
color: red;
}
.child {
font-weight: bold;
}
在上面的代码中，父元素的字体大小和文本颜色设置为20px和红色，而子元素的文本粗细设置为粗体。
因为字体大小和颜色具有继承性，所以子元素的文本大小和颜色都继承自父元素，变成了20px大小和红色。而字体粗细不具有继承性，所以子元素的文本仍然是粗体。
最终的效果是父元素的文本颜色为红色，字体大小为20px，而子元素的文本颜色也为红色，字体大小也为20px，但是字体粗细为粗体。
优先级
当给元素设置样式时，如果有多个选择器指定的是同一个元素，就会有优先级的产生。
注意区别层叠性和优先级：
- 层叠性是指选择器相同，样式规则不一样
- 优先级是当不同的选择器指定同一个元素时，样式规则是一样的
常见的选择器及其权重如下表所示
| 选择器 | 选择器权重 |
| 继承 或者 通配符（*） | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| !important | 无穷大 |
优先级注意点：
- 权重是有4组数字组成，但是不会有进位。
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类和伪类选择器为10，id选择器为100，行内样式表为1000，！important无穷大
- 继承的权重为0，如果该元素没有被选择器选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加
当出现复合选择时 ，就会出现权重叠加，则需要计算权重
下面举几个例子：
- div ul li ------> 0,0,0,3
- .class ul li ------> 0,0,1,2
- a:hover -------> 0,0,1,1
- .class a ------> 0,0,1,1
计算权重的时候 ，注意4组数字之间不能进位，比如你有10个元素选择器，加起来还是0,0,0,10而不是0,0,1,0
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
