侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

新手学习css优先级

前端  /  管理员 发布于 7年前   154

css不是一种程序语言,而是一种描述语言。因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式。但是,大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决。

造成这些问题的主要因素,是css优先级。css优先级是css中最难理解的概念之一,但对于掌握css来说非常重要。理解css优先级,不仅有利于快速解决样式问题,而且能在布局层面,帮助我们写出更明晰,更合理的css代码。

什么是css优先级

css的组成单元是样式规则(CSS Rule),单条样式规则的形式如下:

其中,选择符(Selector)决定了后边所写的属性定义会作用到哪些元素,因此称为选择符。

css有一个核心特性,当多条样式规则中的同一个属性(比如padding)作用到了同一个元素,这些样式之间就会发生覆盖:

图中由前端调试工具所显示的,被划掉的css样式,不会呈现在这里选中的网页元素上,因为它们被覆盖掉了。css优先级,就是指在这种情况下,得出“应该由哪一条样式规则的内容覆盖掉其他的”这个结论的过程中所遵循的原则。更一般的表述是,优先级高的css样式,将覆盖优先级低的css样式,成为最终网页元素的实际样式。

注意,前端调试工具显示的,”被划掉“的css样式,并不是说一定是完全覆盖。css中的一些组合属性(比如margin,可以拆分为margin-top、margin-right、margin-bottom、margin-left),在这种样式覆盖中遵循的是局部覆盖的原则,即使在前端调试工具中它们看起来“整个都被划掉了”:

css优先级的影响因素

css优先级的影响因素要考虑三部分内容,css选择符权重、!important标识符、属性继承。很多文章都阐述过css选择符权重这一点,但后面两部分却很少被提及。本文会依照这三部分做详细的说明。

属性继承

css中一部分属性是可继承属性,比如文本颜色color。css优先级的讨论,首先应认清css中的属性继承所带来的影响。由于存在可继承属性,一个网页元素的样式来源可以分为两类:

  • 由css选择符直接定义到元素本身的样式。
  • css选择符未作用到,但继承自父级元素的样式。

定义到元素本身的样式,包括浏览器默认样式,一定比继承得到的样式优先级高。因此,可以这样认定:继承得到的样式的优先级是最低的,在任何时候,只要元素本身有同属性的样式定义,就可以覆盖掉继承值:

而且,继承样式是最低优先级这一点,是无视继承样式所在的样式规则的内容的。这就是说,继承样式所在的样式规则,即使其选择符的权重比元素本身样式的选择符的权重更高(本文后文会介绍选择符权重~ :) ),甚至继承样式被写了!important,继承样式会被元素本身样式覆盖这一点仍然成立。

举例来说明。下面这段html:

<div id="container"> <p class="note_text">acgtofe - 动漫与前端技术的综合博客</p></div>

对应的css:

#container{color:darkblue;}.note_text{color:darkorange;}

这个部分在所有浏览器中的效果都是:

再为原来的css增加!important:

#container{color:darkblue !important;}.note_text{color:darkorange;}

然后,会发现所有浏览器中的效果都不变:

当一个元素有多个父级元素都定义了继承样式,这些继承样式之间的优先级又是怎样的?这时候,遵循的优先级原则可以叫做就近原则,也就是说,在存在多个继承样式时,层级关系距离当前元素最近的父级元素的继承样式,具有相对最高的优先级。同样,这时候也是无视样式规则内容的。

就近原则其实不算是新的结论,想一下,如果把每一个父级元素都作为当前元素,然后按照前边的“元素本身样式大于继承样式”的原则推理一遍,就可以明白,离得最近的父级元素的继承样式优先级最高,是很合理的。

css选择符权重

css选择符权重是css优先级的核心概念。但在考虑css选择符权重前,请记住,这条优先级原则涉及的样式都是指定义在元素本身的样式。

每一条样式规则的选择符,除了决定这条样式规则会作用到哪些元素之外,选择符也是浏览器判断css规则优先级的参考信息。css选择符权重不是简单的内容,但却可以用简单而直观的方法做阐述。

css选择符权重是一个数字游戏,比的就是谁的计算值更大。权重计算值大的样式规则将有更高的优先级。你可以想象为龙珠里的战斗力测量,在这场权重战争(Specificity Wars,这也是早期的一篇阐述css优先级的文章中用到的词)中,战斗力最强的将取得胜利。

战斗力的测量方法是统计选择符中的不同组成元素的个数,并以 (a,b,c,d) 这种形式来判断。其中,abcd分别代表了不同类别的选择符组成元素,且战斗力分别在不同的数量级,a最强,d最弱。从弱到强,这4个字母分别代表的类别是:

  • 元素选择符(Element),伪元素选择符(Pseudo Element) d = 1 C (0,0,0,1)
  • 类选择符 (Class),伪类选择符(Pseudo class),属性选择符(Attribute) c = 1 C (0,0,1,0)
  • Id选择符 b = 1 C (0,1,0,0)
  • 内联样式(Inline style) a = 1 C (1,0,0,0)

这里的伪元素和伪类做一下补充说明。伪元素选择符,指的是样式作用到的元素不是html结构中的实际元素,即不是真正的dom元素。目前只有:before,:after,:first-line,:first-letter和::selection这5个伪元素选择符。伪类选择符,则是指除前边的这部分选择符之外,在css中加入冒号:的,用于实现动态效果与智能控制的选择符,比如:hover,:nth-of-type(n)。从css3开始,通过区别使用双冒号::来表示伪元素,单冒号:来表示伪类,但为了和以前的浏览器兼容,:after这种诞生于css2的伪类选择符仍然允许使用单冒号的写法。

现在,可以找一些css选择符计算一下了:

看过这些例子后,请理解为,简单的分类计数,正是css中的战斗力测量方法。(a,b,c,d) 这种形式中,abcd分别是不同的数量级,a>b>c>d,和数字的大小比较方法相同,从高位开始,如果高位数字相同,则取低一位数字比较,以此类推。选择符权重计算值最大的样式规则中的属性,覆盖其他的样式规则中的同名属性。

如果你觉得自己计算麻烦,请到Specificity Calculator,这是一个非常棒的计算器。

(a,b,c,d) 中,a代表的内联样式实际是存在于html代码中,只能取值为0或1,所以和其他的较为不同。后边的bcd虽说是不同的数量级,但详细说来有多大差距呢?请看下面这一段Firefox浏览器源代码:

可以看出,class和id对应的十六进制数值之间隔了2位,所以,在Firefox中,要256(162)个class才相当于1个id。在不同浏览器中,这种层级差距,可能有所不同。在写本文的时间点,Opera和Chrome中用256+的class也不能大于id的权重。不过,这些细节信息并不重要,你在实际使用中不可能用到这个数量的选择符。所以,应认为前面所述的权重计算方法是可靠的。

如果权重计算值相同,则进入后一个环节:样式定义顺序。

样式定义顺序

权重计算值相同的样式规则,定义顺序靠后的优先级高。这里的定义顺序,包含了所有的静态样式(不包括由javascript创建<style>或<link>元素引入的样式)定义的可能情况。如直接写在html的<style>标签内的样式规则,通过<link>引入的css文件,以及@import引入的css文件。

请记住,只有权重计算值相同的时候,你才需要考虑样式定义顺序。

!important标识符

!important是可以写在样式规则中的某一属性定义值后的标识符,用于提升某一属性的样式定义的优先级。不同于决定整条样式规则优先级的css选择符权重,!important只影响自己所在位置的单一属性。!important在优先级原则中,可以理解为前文的(a,b,c,d)结构中的,比a更高位的标识:

然后,你完全再按照前文的css选择符权重的比较方法,就可以得出在这种情况下的css优先级了。具体说的话,可以表述如下:

  • 写有!important标识符的样式,其优先级一定大于没有该标识符的样式。
  • 在都写有!important标识符的样式之间,再按照一般的css选择符权重的优先级原则做判断。

css优先级的浏览器兼容性

css优先级虽然是不简单的内容,但幸运的是,除IE6和IE7存在少量优先级的bug(详见IE Specificity bugs)外,几乎所有浏览器都很一致地遵循css优先级原则。所以,css优先级是很通用的概念,可以在各种情况下应用而不必担心兼容性。

结语

css优先级的概念在本文就介绍到此。本文所阐述的仍有不够全面的地方,如果你碰到一些新的问题,欢迎来这里讨论。在实际应用中,理解css优先级并不是让我们去这样分析每一条样式规则,而只是让我们有一个更清醒的状态,知道如何去布局和控制自己所写的css。所谓“知己知彼,百战不殆”,也是这样的道理。

css全名是层叠样式表(Cascading Style Sheet),css优先级正是这种“层叠”中所遵循的原则,由此也可以看出css优先级的重要性。最后,以一个自制的图来结尾:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


  • 上一条:
    css进阶学习 选择符
    下一条:
    简单明了带你了解CSS Modules
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客