10.CSS三大特性

css中有三大特性分别是层叠性，继承性和优先级

目录

1 层叠性

2  继承性

3  优先级

3.1  基础选择器优先级

3.2  复合选择器优先级

3.2.1  后代选择器与子选择器

3.2.2  并集选择器

---

1 层叠性

当我们在css中使用同一个选择器对同一个属性进行设置时，网页会选用后设置的样式，这种性质叫做层叠性

如果使用调试工具，我们可以发现，之前的设置的样式是自动被注释掉的

如果样式不冲突，它就不会层叠，比如我对一个div设置文字大小

发现依然是绿的，并使用了88像素的尺寸

调试工具中是这样的

2  继承性

子标签会继承父标签的部分样式，我们现在创建一个div，里面放一个span，然后我们队div设置样式

发现我们并没有对span设置样式，而span也有与div(父元素)相同的样式

在调试工具中会写 Inherited from div(继承自div)

说部分属性是因为，我如果对div设置宽与高，那么span就不会继承

我们如果对body的文字进行设置font，那么font就会配置在大部分字体上(标题标签这些需要单独设置的不会继承)

这里我们要单独提一下行高，我们将行高设置为3倍文字大小的值，然后设置div文字大小为20px

发现行高的倍数也是可以继承过来的

3  优先级

3.1  基础选择器优先级

当一个元素有不同选择器对同一属性进行设置时会出现冲突，为解决冲突，CSS产生了优先级的特性

比如我们在这里对标签选择器与类选择器同时设置color属性

我们发现它选用了类选择器的配置，那么这就说明类选择器的优先级高于标签选择器

我们选择器的优先级是这样排列的

!important > 行内样式 > ID选择器 > （类选择器 = 伪类选择器 = 属性选择器） > (元素(标签)选择器 = 伪元素选择器)  > (继承过来的样式 = *[通配符选择器])

类选择器与伪类选择器同时存在遵循层叠性，谁后写的(位置在更下面)就用谁

我们之前没使用过!important，我们现在用一下，它要在每一个属性后面加上!important

现在它就变为红色了

继承过来的样式权重是最小的，这也就是为什么我们在body中设置的字符颜色，不能自动在a标签中生效

3.2  复合选择器优先级

3.2.1  后代选择器与子选择器

后代选择器会有权重叠加的问题，比如

我分别对li进行了两次设置，我们看一下效果

发现它是绿色的，绿色就代表它和层叠性(书写的顺序)没有关系

这就引入了我们CSS权重叠加的问题，可以理解为css越具体的，优先级越高，ul li相当于两个标签选择器，而li只有一个，所以ul li的优先级更高

那么我们可以尝试class中写li

我们分析一下.a_ul(类选择器)>ul(标签选择器) li=li，所以他最终是蓝色的

在课程中为了方便我们记忆，对每一个选择器的优先级进行了赋值

• !important 无穷大
• 行内样式 (1,0,0,0)
• ID选择器 (0,1,0,0)
• （类选择器 = 伪类选择器 = 属性选择器） (0,0,1,0)
• (元素(标签)选择器=伪元素选择器) (0,0,0,1)
• (继承过来的样式 = *[通配符选择器]) (0,0,0,0)

a_ul+li = (0,0,1,0) + (0,0,0,1) = (0,0,1,1)

ul + li = (0,0,0,1) + (0,0,0,1) = (0,0,0,2)

css会选用值比较大的数，在用以上值赋值计算时，不存在进位问题，也就是说即使有11个标签选择器(0,0,0,11)，也不会比一个类选择器(0,0,1,0)优先级高，但是11个标签选择器依然比10个标签选择器优先级高

我们注意伪类选择器，比如a:hover，它的权重值是(0,0,1,1)

子选择器同样适用权重叠加

3.2.2  并集选择器

并集选择器不适用权重叠加，它遵从层叠性