CSS具有三大特性:
- 层叠性
- 继承性
- 优先性
层叠性
层叠性主要是解决样式冲突的问题 – 相同选择器 给设置相同的样式,此时一个样式会覆盖掉另一个样式。
层叠性原则:
- 样式冲突,遵循的是就近原则,哪个离样式近,就执行哪个样式
- 样式不冲突,不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: white;
background: rgba(0,0,0);
}
div {
color: red;
background: rgba(0, 0, 0, 0.5)
}
</style>
</head>
<body>
<div>设置黑色背景</div>
</body>
</html>
具体效果如下:
继承性
CSS中的继承是指 ---- 子标签会继承父标签的某些样式,如文本颜色和字号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: pink;
}
</style>
</head>
<body>
我是父类颜色
<div>我是子类</div>
</body>
</html>
恰当地使用继承可以简化代码,降低CSS样式的复杂性
优先性
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器的权重执行
在考虑权重时,需要注意一些特殊的情况,具体如下:
- 继承样式的权重为0。
即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。 - 行内样式优先。
应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。 - 权重相同时,CSS遵循就近原则。
也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。 - CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。