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

1099 篇文章 1 订阅
723 篇文章 8 订阅

当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看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,应该应用前者的样式,然而事实是应用后者的样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值