影响CSS优先级规则的是什么-创新互联

本篇内容主要讲解“影响CSS优先级规则的是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“影响CSS优先级规则的是什么”吧!

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

CSS的继承性

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

< div>

< p>< /p>

< /div>

如果

有个属性color:red，则这个属性将被

继承，即

也拥有属性color:red。

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

影响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，应该应用前者的样式，然而事实是应用后者的样式。

到此，相信大家对“影响CSS优先级规则的是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！