1.层叠性:覆盖前一个样式
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式
- 样式不冲突,不会层叠
案例:
2.继承性
CSS中的继承:子标签会继承父标签的某些样式,如文字颜色和字号,简单的理解就是:子承父业。
- 恰当地使用继承可简化代码,降低CSS样式的复杂性。
- 子元素可以继承父元素的样式(
text- 、 font- 、 line-这些元素开头的可以继承,以及color属性)
案例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
color: cyan;
}
div {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<p>文字颜色</p>
</div>
</body>
</html>
3.优先级
通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式表为1000,!important无穷大
(行内style > id选择器 > 类选择器 > 标签选择器 > 通配符)