0.前言
往期文章CSS引入方式及选择器分类。CSS三大特性,即层叠,继承,优先级。
1.层叠
等级相同的选择器针对某一或某些属性的样式产生冲突,那么后声明的选择器在这些属性上设置的样式将覆盖先声明的选择器,而未产生冲突的属性不受影响。
至于怎样才算等级相同,可进一步查看后面的优先级,下面给出例子的选择器的等级是相同的,放心查看。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠</title>
<style>
.box1{
color: black;
background-color:palegreen;
}
.box2{
color: red;
}
</style>
</head>
<body>
<div class="box1 box2">太阳当空照</div>
</body>
</html>
效果
2.继承
子元素可以继承父元素的属性,这些属性通常是与文字相关的,通常是以text-,font-,line-开头的属性和color属性;而有些属性是不可继承的,比如margin,padding,display,border,background-color这类与盒子模型相关的属性是不能继承的。具体属性能不能够继承,可以查看 官方文档。
案例
下面是关于继承稍微更近一层的知识,比如如果子元素不想继承父类元素的样式,但是又想保持原有样式该如何处理呢?这一部分可以跳过,直接看优先级。
每一个属性都可以设置如下属性值。
属性值 | 作用 |
---|---|
inherit | 如果属性能够被继承,那么将继承父类的属性值 如果不能够被继承,此属性值设置无效。 |
initial | 保持该属性的默认值。 |
unset | 如果属性能够被继承,那么unset等价于inherit; 如果属性不能够被继承,那么unset等价于initial。 |
下面的两个例子是基于color属性能够被继承,display属性不能够被继承来设置的。
Demo1(基于color能够被继承)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title></