详解CSS的优先权
作者:blank 来源:蓝色理想 发布时间:2008-05-11 18:57:00
发现很多朋友对 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,后者胜出*/
节选 old9 的《CSS的优先权》(无法穿越 GFW)
猜你喜欢
- 首先预览一下 PyCharm 在实际应用中的界面:(更改了PyCharm的默认风格)安装首先去下载最新的pycharm 2.7.3,进行安装
- MVC和MTV框架MVCWeb服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们
- 介绍本文介绍如何通过 rk-boot 快速搭建 gRPC 超时 * 。什么是 gRPC 超时 * ? * 会拦截 gRPC 请求,并根据策略
- FileField中的upload_to属性可以设定上传文件的存储目录和名称,它可以是个字符串,也可以是个callable,比如一个方法。当
- 大家好,今天分享一个实用的办公脚本:将多个PDF合并为一个PDF,例如我手上现在有如下3个PDF分册,需要整合成一个完整的PDF如果换成你操
- 概念Node.js 是构建在Chrome javascript runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序。N
- 众所周知,IE 6只支持单通道的PNG图片(即只有透明/不透明2种状态,gif图片的透明单通道透明),因此如果需要使用alpha透明的png
- Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互。 下面是散仙使用D
- 如果你经常使用python开发GUI程序的话,那么就知道,有时你需要很长时间来执行一个任务。当然,如果你使用命令行程序来做的话,你回非常惊讶
- 一、python numpy + matplotlib 画股票k线图# -- coding: utf-8 --import requests
- 最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, sc
- 损失函数通过torch.nn包实现,1 基本用法criterion = LossCriterion() #构造函数有自己的参数loss =
- 业务背景: 基本业务场景是这样的,请求数据(车辆vin信息)进入到接口中,需要先判断其在数据库中的状态,如果库中不存在该vin,或者该vin
- 1、说明当函数/方法执行出现异常,会将异常传递给函数/方法的调用一方。如果传递到主程序,仍然没有异常处理,程序才会被终止。2、实例def d
- 随着网络技术的不断发展,网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站,更是人们关注的热点:政府利用网站宣传自己的施政纲领
- objectobject 是 Python 为所有对象提供的父类,默认提供一些内置的属性、方法;可以使用 dir 方法查看新式类以 obje
- 感谢AKA及作者。Perl 中的正则表达式正则表达式的三种形式正则表达式中的常用模式正则表达式的 8 大原则 &nbs
- 前言pyinstaller能够在Windows、Linux等操作系统下将Python脚本打包成可直接运行程序。使Python脚本
- 对于刚刚学习编程的同学来说对编程是非常陌生的,对很多的代码也是非常陌生,高中忙于学习的我们甚至可以说是对编程是一无所知,进入大学进入到这个专
- 如下所示:#文件内容 lisilock = open("lock_info.txt", "r+",e