当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看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，应该应用前者的样式，然而事实是应用后者的样式
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/16139.html
