CSS选择器

基本选择器

选择器	含义	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反转伪类

:notDemo

这里明显可以看出,:not不参与权重计算

基于形式的优先级

选择器的形式

由此可见,属性选择器里面的选择器不参与权重计算,它的权重只是属性选择器的权重

关于后代元素选择器

后代元素选择器

对于后代元素选择器来说,祖先选择器跟每个后代元素的距离都是一样的.在这个例子中,由于优先级一样,所以后面的.red p覆盖前面的.green p

覆盖之前:

1.颜色是? 绿色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色

覆盖之后:

1.颜色是? 红色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色

相关参考:
优先级
KB005: CSS 层叠