CSS选择器中的特殊性
我们来看一下一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color:yellow;
} h1.title {
color:red;
}
</style>
</head>
<body>
<h1 class="title">我是H1</h1>
</body>
</html>
大家觉得h1这个元素应该是红色还是黄色的呢？
答案是红色的，但是为什么呢？答案就在于每个选择器的特殊性（specificity）。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。
如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：
对于选择器中给定的各个ID属性值，加0，1，0，0。
对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0。
对于选择器中给定的各个元素和伪元素，加0，0，0，1。伪元素是否有特殊性，在这方面css2有些自相矛盾，不过css2.1很清楚的指出，伪元素有特殊性，而且其特殊性为0，0，0，1。
通配选择器对一个选择器的特殊性没有贡献。换句话说，其特殊性为0,0,0,0。
h1{ color:yellow; }//0,0,0,1
h1.title{color:red;}//0,0,1,1
选择器h1.title之所以能赢，是因为它多了一个1；0,0,1,1大于0,0,0,1；浏览器在计算这些值的时候从左到右排序的。
所以如果有这么两条样式的话
<style>
h1 {
color:yellow;
} body h1{
color:red;
}
</style>
h1{ color:yellow; }//0,0,0,1
body h1{color:red;}//0,0,0,1
当浏览器计算出两条规则特殊性一样的话，就会按照顺序来，下面的会覆盖前面的规则。
那么第一个0代表什么呢，一般地，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。
有时某个声明可能非常重要，超过了所有其他声明。CSS2.1称之为重要声明（原因显而易见），并允许在这些声明的结束分号之前插入！important来标志。
p.dark {color:#333 !important; background: white;}
在此为颜色值#333加了标志！important,而背景值white未加这个标志。如果你希望把两个声明都标志为重要，那么每个声明都需要它自己的!important标志：
p.dark {color:#333 !important; background: white !important;}
必须正确地放置!important,否则声明将无效。！ important总是放在声明的最后，即分号前面。如果一个属性的值可以包含多个关键词，如font,这一点则尤其重要，必须将!important标志放在声明的最后：
p.light {color: yellow; font: smaller Times, serif !important;}
如果!important放在font声明的任何其他位置，整个声明都将无效，相应地不会应用其任何样式。
CSS选择器中的特殊性的更多相关文章
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别？
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- css选择器中:first-child 与 :first-of-type的区别
## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...
- CSS选择器中带点(.)怎么办？
在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...
- css 选择器中的正则表达式
正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表 ...
- css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素: ...
- [转] css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素: ...
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 【CSS】使用CSS选择器
CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic s ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
随机推荐
- 关于if判断和switch
1.if判断: if(条件1){ 执行语句: } else if(条件2)}{ 执行语句2: } else{ 执行语句3: } if里面可以有无限个else if,而else if里面能嵌套无限个if ...
- Spring———bean的创建方式，注入方式，复杂类型注入 概括
Spring相关概念和类 1.IOC inverse of control 控制反转 反转了创建对象的方式 以前:new 对象,管理和维护 ...
- 中国地图插件世界地图||jQuery矢量SVG地图插件JVectorMap
中国地图插件|jQuery矢量SVG地图插件JVectorMap https://www.html5tricks.com/jquery-china-map.html 世界地图: https://www ...
- Nginx做流媒体服务Windows版实现直播
声明:网上有很多关于Linux系统的配置,这里就不记录了.刚开始搭建直播室,用的是Java语言, Java开源的流媒体服务有Red5,但是很久没更新了,而且文档较少不容易上手,对于直播功能相对要求较低 ...
- CentOS-7-1804下MySQL安装及防火墙设置
第一步,下载MySQL Linux 版本安装包,这里使用 这个版本. 第二步,上传安装包到Linux系统中. 第三步,解压安装包 tar -zxvf mysql--linux-glibc2.-x86_ ...
- FTP 代理服务器实现
本文将在Linux环境下实现一个简单的FTP代理服务器,主要内容涉及FTP主动/被动模式和简单的Socket编程. 1. 主动模式和被动模式 FTP有两种模式,即主动模式(Active Mode)和被 ...
- Visual Assist X 中使用doxygen的模板注释
http://blog.csdn.net/dhifnoju/article/details/44947213 Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,完全支持C.C+ ...
- Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { ...
- 一、Redis事务原理分析
一.Redis事务原理分析 在Redis的事务里面,采用的是乐观锁,主要是为了提高性能,减少客户端的等待.由几个命令构成:WATCH, UNWATCH, MULTI, EXEC, DISCARD.通过 ...
- C# 连蒙带骗不知所以然的搞定USB下位机读写
公司用了一台发卡机,usb接口,半双工,给了个dll,不支持线程操作,使得UI线程老卡. 懊恼了,想自己直接通过usb读写,各种百度,然后是无数的坑,最终搞定. 现将各种坑和我自己的某些猜想记录一下, ...