【前端学习】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>