看这篇文章之前,对这个问题一直没深入研究,导致有时候遇到一些问题会很麻烦,看到这篇文章让我茅塞顿开,转帖回来保存一下以便今后复习。

发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化?

CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则:

  • 元素的 style 样式属性,加 1,0,0,0。
  • 每个 ID 选择符(#id),加 0,1,0,0。
  • 每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。
  • 每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
  • 其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。

最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则:

  • !important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
  • 如果优先权一样,则按源码中“后来者居上”的原则。
  • 由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。

范例分析:

h1 {color: red;}/* 只有一个普通元素加成,结果是 0,0,0,1 */body h1 {color: green;}/* 两个普通元素加成,结果是 0,0,0,2 *//*0,0,0,1 小于 0,0,0,2 ,后者胜出*/

h2.grape {color: purple;}/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/h2 {color: silver;}/*一个普通元素,结果是 0,0,0,1 *//*0,0,1,1 大于 0,0,0,1 ,前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}/* 7个普通元素、一个属性选择符、两个其他选择符(子选择符 >),结果是0,0,1,7 */li#answer {color: navy;}/* 一个ID选择符,一个普通选择符,结果是0,1,0,1 *//*0,0,1,7 小于 0,1,0,1,后者胜出*/
 

Css的优先权问题的更多相关文章

  1. 高手总结的CSS执行顺序及其优先权问题汇总

    今天在看一本书时又看到了”CSS优 先权“这个问题,感觉这个问题还是比较重要的,也算是样式的特异性吧,尤其是在面对较多.较深层.较复杂的样式属性时,理解CSS的加权计算方法对于重写 样式属性之类的问题 ...

  2. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  3. CSS——优先级

    转自:http://www.planabc.net/2008/05/06/css_specificity/ CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个 ...

  4. CSS读书笔记(1)---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  5. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  6. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  8. CSS知识总结(一)

    一.认识CSS 1.什么是CSS? CSS (Cascading Style Sheet) 层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 由于CSS属性或规则尚未成为 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. shell 判断字符串是否为空

    #!/bin/bash a="" if [ -n "$a" ] then echo "-n $a : 字符串长度不为 0" else ech ...

  2. Jmeter 之 ServerAgent 在性能测试的时候通过插件监听数据库状态

    https://jmeter-plugins.org/downloads/old/ 下载几个jar包,导入到Jmeter对应到目录下/lib/ext文件夹下,注意只支持Jmeter3.2(不含)以下版 ...

  3. pycharm Django

    上面的两张图片,是Django项目出错的图片,记得以前也出现过这个情况,当时好像是关闭了一些端口程序,后来就可以了,但是忘记了,那个链接也找不到了,所以现在很困惑,再找找. 电脑上现在程序安装的太多, ...

  4. RabbitMQ入门_12_发布方确认

    参考资料:https://www.rabbitmq.com/confirms.html 通过 ack 机制,我们可以确保队列中的消息一定能被消费到.那我们有办法保证消息发布方一定把消息发送到队列了吗? ...

  5. ninja install error

    ninja install ...... CMake Error at cmake_install.cmake:36 (FILE):  file INSTALL cannot find  " ...

  6. Python 网络编程和Socket

    2017-07-24 20:43:49 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Http协议主要的操作流程是req ...

  7. Android中如何实现EditText的自动换行

    要实现EditText的自动换行需要实现如下设置: <EditText android:id="@+id/function_lifingcost_edit_txtRemark" ...

  8. Spring Boot 启动 Struts 报冲突

    错误信息如下: Caused by: com.opensymphony.xwork2.config.ConfigurationException: Bean type class com.opensy ...

  9. P3226 [HNOI2012]集合选数

    考虑构造矩阵 1 3 9 27...... 2 6 18 54...... 4 12 36 108...... ...... 发现在这个矩阵上一个合法的集合是一个满足选择的数字不相邻的集合,由于行数列 ...

  10. 『PyTorch』第二弹重置_Tensor对象

    『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...