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，让权重提到最高。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 【前端学习】CSS三大特性
发表评论 取消回复