【前端学习】CSS三大特性
CSS三大特性
CSS的三大特性是为了化简代码、定位问题并且解决问题
继承性
继承性特点：
- 子级默认继承父级的文字控制属性。
- 注意：如果标签自己有样式则生效自己的样式，不继承。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-继承性</title><style>body {font-size: 30px;color: aquamarine;font-weight: 700;}</style>
</head><body><div>div标签</div><p>p标签</p><span>span标签</span><a href="#">a标签</a>
</body>
</html>
其中div、p、span、a标签都会继承父级body标签所定义的属性。
但由于a标签有自己的颜色属性，则此处的a标签不会继承body的color属性，仍然为默认的蓝色。
层叠性
层叠性特点：
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性都生效
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-层叠性</title><style>div {color: red;font-weight: 700;}div {color: green;font-size: 30px;}</style>
</head><body><div>div 标签</div>
</body></html>
两个相同的div，后面div的color属性相同，会覆盖前面的，只生效第二个。
而第一个的font-weight和第二个font-size属性不同，则都生效。
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
- 规则：选择器优先级高的样式生效
- 公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大，优先级越低) - 注意：!important可以提高权重，让优先级到最高，但谨慎使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-优先级</title><style>* {color: rebeccapurple !important;}div {color: red;}.box {color: aquamarine;}#test {color: chocolate;}</style>
</head><body><div class="box" id="test" style="color: cornflowerblue;">div 标签</div>
</body>
</html>
此时虽然通配符优先级最低，但由于后面有提高权重的!important，让权重提到最高。
