CSS学习（第三篇）

目录

CSS三大特性

层叠性

继承性

优先级

权重的叠加

---

CSS三大特性

CSS有三个重要的特性，分别是层叠性、继承性和优先级。

层叠性

相同的标签设置相同的样式时，此时一个样式就会覆盖另一个冲突样式。层叠性主要用来解决该冲突问题。

例.

当对p两次设置颜色时，结果会是什么呢？

结果：

结果是后面的样式，颜色变为蓝色

是因为当对同一个元素样式发生冲突时，由于层叠性后面的样式会覆盖前面的样式。

通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。

注：

1.样式不冲突，不会层叠。

2.样式冲突，遵循就近原则，后面样式盖前面。

继承性

子标签会继承父标签的某些样式，比如文本样式、颜色等。

例.

图中并未给p标签设置样式，那它的字体样式会是默认的吗？
结果：

结果字体显示为蓝色，是因为继承性的存在，我们给body标签设置样式，而p标签是body标签的子标签，会继承父标签的部分样式。

注：

1.合理利用继承性可以简化代码，降低CSS样式的复杂性。

2.并非所有样式都可以继承，与块级元素相关的属性都不具有继承性。

优先级

当对同一个元素指定多个选择器，就会产生优先级的概念。

• 选择器相同，则执行层叠
• 选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或 *	0，0，0，0
标签选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷的

注：

1.权重有四组数字组成，但永远没有进位

2.等级判断从左到右

权重的叠加

如果是复合选择器，则会权重叠加，需要计算权重。

将复合选择器的组成部分的选择器权重相加即复合选择器的权重

例.

ul {   } 权重为0，0，0，1

ul li {   }权重为0，0，0，1 + 0，0，0，1 = 0，0，0，2

.nav li {  }权重为0，0，0，1 + 0，0，1，0 = 0，0，1，1