CSS选择器种类和兼容性总结大全

css5选择器#

名称	举例	描述	详细	权重	ie6-7	ie8	ie9+	其他
标签选择器	p{}	直接使用元素标签进行选择		1	yes	yes	yes
类选择器	.sum{}	类选择器最前方一定要有点	通过元素的类名，来选择元素，一个元素可以有多个类名，都代表这个元素,类名是元素class属性中的属性值，例如`<p class='sum'></p>`	10	yes	yes	yes
id选择器	#tytle{color;}	id在html中具有唯一性,这个属性值前面加一个“#”	一个html元素，id属性值只能用一次	100	yes	yes	yes
通配符选择器	*{key}	匹配全部html元素	一般不使用，因为全部匹配耗性能	0<通配符选择器<1	yes	yes	yes	yes
(标签)属性选择器	[type]或[type=text]	[标签属性名]{}或[标签属性名=属性值]{}	利用标签的属性名和属性值来选择html元素	10	yes	yes	yes	属性选择器在使用的时候，如果一个元素有两个类名，那么是不生效的
分组选择器	.box,li,.p1{color: red};	选择器1，选择器2，选择器3{}	同一份css样式，可以一次性的添加给多个不同的html元素	分组选择器将不同的html分为一组，权重计算的时候都是独立计算，不会叠加。	yes	yes	yes
交集选择器	h2[title]{}		两种选择器同属于一个元素的时候，我们可以使用交集选择器来进行元素的准确选择	所有组合选择器权重之和	yes	yes	yes	作用：精确查找元素，增加选择器的权重
子级选择器	ul>li{color;}	父级选择器>子级选择器{}	存在包含关系的元素选择，通过父级确定选择子级	所有选择器之和	yes	yes	yes	子级选择器必须是紧邻的父子关系
后代选择器(派生选择器)	.div1 ul span{}	祖辈选择器要查找的后代选择器{},中间用空格连接	后代选择器在写的时候尽量控制在３个左右		yes	yes	yes	在一个根元素的范围内，查找到它的后代元素，选择器过多浪费性能，不建议使用
相邻兄弟选择器	.list1+li{color: red;}	哥哥选择器+弟弟选择器{}	通过各个元素选择弟弟选择器，两个选择器之间用“+”连接	选择器之和	yes	yes	yes
伪类选择器	`a:hover{color: red}鼠标经过的状态,或a:link{color: blue}默认状态,或a：active{color: green}鼠标点击的状态,或a:visited{color: blanchedalmond}鼠标点击后的状态`			10	yes	yes	yes	.input;input 鼠标聚焦后的状态，input独有的属性
伪元素	div；或div	通过css代码向指定元素内添加假的（html中不存在的）元素	before 会出现在div所有内容之前，after 会出现在div所有内容之后		no	yes	yes	使用伪元素的时候要保证两个前提：1.要有display这个属性2.要有content这个属性，这个属性的属性值可以为空，但是引号不能少`content:""`
	visited				security issue	yes	yes	security issue

css3选择器#

名称	举例	描述	详细	权重	ie6-7	ie8	ie9+
属性选择器	`E[attr~=value]{}`		指定属性名,并且具有属性值,此属性值是一个此列表(类名),并且以空格隔开,其中词列表中包含了一个value词,并且等号前的~不能省略.
	`E[attr^=value]{}`		^ 表示以谁为开头的,value可以是首字母或者类名	必须是第一个类名
	`E[attr$=value]{}`		$ 表示以谁为结尾,value可以是末尾字母或者类名	必须是最后一个类名
	`E[attr\=value]{}`(由于编辑呈现问题，此处用斜杠代替竖杠,正确写法是`E[attr竖杠=value]{}`)	如果只有一个类名,没有”-“,也可以选中	value必须后面带”-“，value必须是第一个类名
伪类选择器1.	.dome p(3){background: red;}选择dome下的第三个p标签为背景色红色				no	no	yes
2.	.dome p{background: yellow;}选择dome下的第一个p标签为背景色黄色				no	almost	yes
3.	.dome p{background: black;}选择dome下的最后一个p标签为背景色黑色		伪类选择器是针对列表或者很多同级的标签使用,img下是没有效果的也用不到伪类选择器		no	no	yes
4.	.dome p(nlength){}；选择dome下所有的p标签				no	no	yes
5.	.dome p(2n){}；选择dome下的所有偶数个的p标签				no	no	yes
6.	.dome p(3n)选择dome下的所有3的倍数的p标签				no	no	yes
7.	.dome p(n+length)	从第length个开始改变,包括第length个(n是从0开始取值的)	选择大于length后面的元素		no	no	yes
8.	.dome p(-n+length)	包括length，length是从0开始的	选择小于length前面的元素及length元素		no	no	yes
9.	p(3)	选择倒数第三个元素			no	no	yes
10.	p(n)	从大盒子的第一个元素开始	nth-child选择同级元素		no	no	yes
11.	p(n)	从大盒子的第一个p元素开始	nth-of-type 选择指定的元素		no	no	yes
12.	p(n)	倒数第n个	在同级元素中		no	no	yes
13.	p	同类型的第一个	选择一个上级元素下的同类子元素		no	no	yes
14.	p	同类型的最后一个			no	no	yes
15.	p	在父元素中,里面的子元素是唯一的			no	no	yes
16.	p	在父元素中,里面有很多的子元素,但是有一个子元素是唯一的			no	no	yes
空标签	p{display;}	empty 隐藏空标签			no	no	yes
否定选择器	not input([type=submit]){}				no	yes	yes
根元素	root	选择文档的根元素			no	no	yes
目标元素		选择器可用于选取当前活动的目标元素			no	no	no

CSS选择器优先级#

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义

不同级别#

1.在属性后面使用important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承

总结CSS选择器优先级排序#

!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

CSS样式应用，有个简单的计算方式(权值实际并不是按照十进制，用数字表示只是说明思想，一万个class可能也不如一个id权值高)#

内联样式表的权值为 1000
ID选择器的权值为 100
Class类选择器的权值为 10
HTML标签选择器的权值为 1

音乐

音乐

css5选择器#

css3选择器#

CSS选择器优先级#

不同级别#

总结CSS选择器优先级排序#

CSS样式应用，有个简单的计算方式(权值实际并不是按照十进制，用数字表示只是说明思想，一万个class可能也不如一个id权值高)#

支持与分享