web前端学习干货：CSS样式的优先级CSS的继承特性

随着样式表的创建越来越复杂，标签的样式将受到越来越多的影响，无论是来自周围的标签还是它本身。让我们从这两个方面来看看 CSS 样式的优先级。

CSS 继承

CSS 的继承特性意味着应用于标签的那些 CSS 属性会传递给它的子标签。看下面的 HTML 结构：

如果

如果有属性color:red，那么这个属性会被继承，也就是说，它也会有属性color:red。

由上可知伪元素选择器link，当网页复杂，HTML结构嵌套较深时，一个标签的样式会深受其祖先标签样式的影响。

我是一名从事多年开发的老Web前端程序员。我目前正在辞职做我自己的网络前端私人定制课程。今年年初，我花了一个月的时间整理了一份最适合2019年学习的web前端学习干货。整理了各种框架，送给每一位前端小伙伴。如果你想得到它，你可以关注我的头条号，并在后台私信我：前端伪元素选择器link，你可以免费获得。

影响 CSS 优先级的规则是：

CSS 优先规则 1：最近的祖先样式优先于其他祖先样式。

如果我们称标签继承自祖先但没有“祖传风格”的属性，那么“直接风格”就是标签直接具有的属性。有以下规则：

CSS 优先规则 2：“直接样式”优先于“祖先样式”。

选择器优先级

讨论了标签从其祖先继承的属性之后，我们现在讨论标签本身的属性。在讨论 CSS 优先级之前，我们先说一下 CSS7 的基本选择器：

ID 选择器，例如 #id{}

类选择器，例如 .class{}

属性选择器，例如 a[href=”segmentfault.com”]{}

伪类选择器，例如 :hover{}

伪元素选择器，例如 ::before{}

标记选择器，例如 span{}

通配符选择器，例如 *{}

CSS优先规则3：优先关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

最终颜色为黑色，因为内联样式优先于其他选择器。

所有 CSS 选择器都是由以上 7 个基本选择器或组合组成的。有3种组合方式：

后代选择器：.father.child{}

子选择器：.father>.child{}

相邻选择器：.bro1+.bro2{}

当一个标签同时被多个选择器选中时，我们需要确定这些选择器的优先级。我们有以下规则：

CSS优先规则4：计算选择器中ID选择器的个数（a），计算选择器中的类选择器、属性选择器和伪类选择器的个数之和（b），计算选择器中的标签选择选择器和伪元素选择器数量的总和 (c)。按a、b、c的顺序比较大小，越大的优先级越高，相等的比较下一个。如果最后两个选择器中的a、b、c都相等，则根据“最近原则”进行判断。

During the learning process, you may find the statement that weights are given to selectors, that is, ID selectors have a weight of 100, class selectors have a weight of 10, and label selectors have a weight of 1. When a selector is selected由多个ID组成的选择器、类选择器或标签选择器组成时，将所有权值相加，然后进行权重比较。这种说法实际上是有问题的。例如，一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签。按理说110>100，应该应用前者的风格，但事实是应用了后者的风格