影响CSS优先级的规则是什么

当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看CSS样式的优先级。

CSS的继承性

　　CSS的继承特性指的是应用在一个标签上的那些CSS属性被传到其子标签上。看下面的HTML结构：

　　< div>

　　< p>< /p>

　　< /div>

　　如果

有个属性color:red，则这个属性将被继承，即也拥有属性color:red。

　　由上可见，当网页比较复杂，HTML结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

影响CSS优先级的规则是：

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

　　如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性。又有如下规则：

　　CSS优先规则2："直接样式"比"祖先样式"优先级高。

　　选择器的优先级

　　上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论CSS优先级之前，先说说CSS7种基础的选择器：

　　ID选择器，如#id{}

　　类选择器，如.class{}

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

　　伪类选择器，如:hover{}

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

　　标签选择器，如span{}

　　通配选择器，如*{}

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

　　最终的color为black，因为内联样式比其他选择器的优先级高。

　　所有CSS的选择符由上述7种基础的选择器或者组合而成，组合的方式有3种：

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

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

　　相邻选择符:.bro1+.bro2{}

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

　　CSS优先规则4：计算选择符中ID选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按a、b、c的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中a、b、c都相等，则按照"就近原则"来判断。

　　在学习过程中，你可能发现给选择器加权值的说法，即ID选择器权值为100，类选择器权值为10，标签选择器权值为1，当一个选择器由多个ID选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由11个类选择器组成的选择器和一个由1个ID选择器组成的选择器指向同一个标签，按理说110>100，应该应用前者的样式，然而事实是应用后者的样式