基本选择器
| 选择器 | 含义 | CSS版本 | 优先级 |
| * | 通用元素选择器,匹配任何元素 | 2 | 0,0,0,0 |
| E | 标签(元素)选择器,匹配所有使用E标签的元素 | 1 | 0,0,0,1 |
| .class1 | class选择器,匹配所有class属性中包含class1的元素 | 1 | 0,0,1,0 |
| #id1 | id选择器,匹配所有id属性中等于id1的元素 | 1 | 0,1,0,0 |
其中,0,1,0,0中的第一位表示是否是内联的意思,是则为1,不是为0
多元素的选择器组合
| 选择器 | 含义 | CSS版本 | 优先级 |
| E,F | 群组选择器,同时匹配E,F元素,元素之间用,隔开 | 1 | 权重相加 |
| E F | 后代元素选择器,匹配所有属于E元素后代的F元素,元素之间用空格隔开 | 1 | 权重相加 |
| E>F | 子元素选择器,匹配所有E元素的子元素F | 2 | 权重相加 |
| E+F | 相邻同胞选择器,匹配所有紧随E元素之后的同级F元素 | 2 | 权重相加 |
| E~F | 同级元素通用选择器,匹配任何在E元素之后的同级F元素 | 3 | 权重相加 |
属性选择器
| 选择器 | 含义 | CSS版本 | 优先级 |
| E[attr] | 匹配所有具有attr属性的E元素 | 2 | 0,0,1,0 |
| E[attr=val] | 匹配所有attr属性等于”val”的E元素 | 2 | 0,0,1,0 |
| E[attr~=val] | 匹配所有attr属性具有多个空格分隔的值,其中一个值等于”val”的E元素 | 2 | 0,0,1,0 |
| E[attr¦=val] | 匹配所有attr属性具有多个连字号(-)分隔的值,其中一个值以”val”开头的E元素 | 2 | 0,0,1,0 |
| E[attr^=”val”] | 属性attr的值以”val”开头的元素 | 3 | 0,0,1,0 |
| E[attr$=”val”] | 属性attr的值以”val”结尾的元素 | 3 | 0,0,1,0 |
| E[attr*=”val”] | 属性attr的值包含”val”字符串的元素 | 3 | 0,0,1,0 |
伪类选择器
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:link | 匹配所有未被点击的链接 | 1 | 0,0,1,0 |
| E:visited | 匹配所有已被点击的链接 | 1 | 0,0,1,0 |
| E:active] | 匹配鼠标已经激活还没有释放的E元素 | 1 | 0,0,1,0 |
| E:hover | 匹配鼠标悬停其上的E元素 | 1 | 0,0,1,0 |
| E:lang(language) | 匹配lang属性等于language | 2 | 0,0,1,0 |
| E:focus | 匹配获得当前焦点的E元素 | 2 | 0,0,1,0 |
| E:first-child | 匹配父元素的第一个子元素 | 2 | 0,0,1,0 |
CSS3中伪类,比如:hover写为::hover,这是为了与伪元素作区分,为了支持旧版的网站,以前的单引号伪类还有效
与用户界面有关的伪类
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:enabled | 匹配表单中激活的元素 | 3 | 0,0,1,0 |
| E:disabled | 匹配表单中禁用的元素 | 3 | 0,0,1,0 |
| E:checked | 匹配获得当前焦 | 3 | 0,0,1,0 |
结构性伪类
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:root | 匹配文档的根元素,对于HTML文档,就是HTML元素 | 3 | 0,0,1,0 |
| E:nth-child(n) | 匹配其父元素的第n个子元素,第一个编号为1 | 3 | 0,0,1,0 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1 | 3 | 0,0,1,0 |
| E:nth-of-type(n) | 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 | 3 | 0,0,1,0 |
| E:nth-last-of-type(n) | 与:nth-last()作用类似,但是仅匹配使用相同标签的元素 | 3 | 0,0,1,0 |
| E:last-child | 匹配父元素的最后一个子元素,等同于:nth-last-child(1) | 3 | 0,0,1,0 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) | 3 | 0,0,1,0 |
| E:last-of-type | 匹配父元素下使用同种元素的最后一个子元素,等同于:nth-last-of-type(1) | 3 | 0,0,1,0 |
| E:only-child | 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或:nth-child(1):nth-last-child(1) | 3 | 0,0,1,0 |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1) | 3 | 0,0,1,0 |
| E:empty | 匹配一个不包含任何子元素的元素,注意,文本借点也被看作子元素 | 3 | 0,0,1,0 |
反选伪类
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:not(selector) | 匹配非当前选择起的任何元素 | 3 | 0,0,0,0 |
target伪类
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:target | 匹配文档中特定”id”点击后的效果 | 3 | 0,0,1,0 |
伪元素
| 选择器 | 含义 | CSS版本 | 优先级 |
| E:first-line | 匹配E元素的第一行 | 2 | 0,0,0,1 |
| E:first-letter | 匹配E元素的第一个字母 | 2 | 0,0,0,1 |
| E:before | 在E元素之前插入生成的内容 | 2 | 0,0,0,1 |
| E:after | 在E元素之后插入生成的内容 | 2 | 0,0,0,1 |
| E::selection | 匹配用户当前选中的元素 | 3 | 0,0,0,1 |
| E::placeholder | 控制表单输入框占位符的外观,浏览器暂时不支持 | 3 | 0,0,0,1 |
Selectors Level 4
暂略
Selectors Level 4
Selectors Level 4草案
CSS4 Rocks
CSS选择器,优先级与匹配原理
浏览器通过优先级来判断哪一些属性应该应用到一个元素上.优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一个选择器类型的值来决定.
选择器的权重(特殊性)升序排列:
继承
通用元素
标签|伪元素
类|属性|伪类
ID
内联样式
!important
所有的选择器权重都是通过相加计算,大的优先;如果权重一样大,后定义的优先.
此外,优先级还要考虑到CSS样式的来源,样式表可能有三种不同的来源:作者,用户和客户端,按升序排列:
客户端声明(UA declarations)
一般用户声明(user normal declarations)
一般作者声明( author normal declarations )
加了 ‘!important’ 的作者声明( author important declarations )
加了 ‘!important’ 的用户声明( user important declarations )
当拥有相同重要性和来源,按照CSS特殊性来排序.引用的样式表(@import )中的规则被认为出现在样式表本身的所有规则之前,在@charset之后
<style>
@charset "UTF-8";
@import url("userContent.css");
p {
color: green !important;
}
</style>
!important
使用!important可以覆盖任何其它没有使用!important的规则,在IE6时代!important多用来hack,不过现在不建议使用,除非需要在外部css文件中提升优先级
一些Demo
:not反转伪类
这里明显可以看出,:not不参与权重计算
基于形式的优先级
由此可见,属性选择器里面的选择器不参与权重计算,它的权重只是属性选择器的权重
关于后代元素选择器
对于后代元素选择器来说,祖先选择器跟每个后代元素的距离都是一样的.在这个例子中,由于优先级一样,所以后面的.red p覆盖前面的.green p
覆盖之前:
1.颜色是? 绿色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色
覆盖之后:
1.颜色是? 红色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色
相关参考:
优先级
KB005: CSS 层叠
