从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇内容主要讲解“影响CSS优先级规则的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“影响CSS优先级规则的是什么”吧!
创新互联公司专注于上犹网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供上犹营销型网站建设,上犹网站制作、上犹网页设计、上犹网站官网定制、小程序制作服务,打造上犹网络公司原创品牌,更为您提供上犹网站排名全网营销落地服务。当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看CSS样式的优先级。
CSS的继承特性指的是应用在一个标签上的那些CSS属性被传到其子标签上。看下面的HTML结构:
< div>
< p>< /p>
< /div>
如果
有个属性color:red,则这个属性将被
继承,即
也拥有属性color:red。
由上可见,当网页比较复杂,HTML结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。
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优先级规则的是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图