css选择器总结

1. 基本选择器

序号	选择器	名称	说明	css版本
1	*	通用选择器	选择所有元素，包括html和body	2
2	div,span	标签选择器	根据标签选择元素	1
3	#	id选择器	选择指定id元素	1
4	.	类选择器	选择指定class	1
5	[attr]	属性选择器	根据元素属性去选择	2-3

属性选择器的几种用法

[href] {color: red;}

[type="password"] {color: red;}

[href^="http"] {color: red;}

[href$=".cn"] {color: red;}

[href*="baidu"] {color: red;}

[class~="def"] {color: red;}// 属性值具有多值时，使用如<p class="abc def"></p>

[lang|="en"] {color: red;}// 属性中有'-'时使用，如<p lang="en-us"></p>

示例代码：

<style type="text/css">
    .abc{
        border: 1px solid blue
    }
    .def{
        font-size: large;
    }
    .ddd{
        font-size: small;
    }
    [class~='def']{
        color: red
    }
</style>
<p class="abc def">hello world</p>// 蓝框 大字 红色
<p class="abc ddd">hello world</p>// 蓝框 小字

2. 复合选择器

序号	选择器	名称	说明	css版本
1	s1,s2,s3	分组选择器	选择多个选择器的元素	1
2	s1 s2	后代选择器	指定选择器的后代元素	1
3	s1 > s2	子选择器	指定选择器的子元素	1
4	s1+s2	相邻兄弟选择器	选择相邻且之后的元素	1
5	s1~s2	兄弟选择器	选择之后的元素	2-3

3. 伪元素选择器

序号	选择器	名称	说明	css版本
1	::first-line	伪元素选择器	块级首行	1
2	::first-letter	伪元素选择器	块级首字母	1
3	::before	伪元素选择器	选择元素之前插入内容	2
4	::after	伪元素选择器	选择元素之后插入内容	2
5	::selection	伪元素选择器	光标滑动选择内容	2

4. 伪类选择器之结构性伪类选择器

序号	选择器	名称	说明	css版本
1	:root	根元素选择器	文档根元素，一般为html	3
2	:first-child	子元素选择器	第一个子元素	2
3	:last-child	子元素选择器	最后一个子元素	2
4	:only-child	子元素选择器	只有一个子元素的	2
5	:only-of-type	子元素选择器	子元素只有一种类型的	1
6	:nth-child(n)	子元素选择器	第n个子元素	2

ul > li:first-child{ // li且是第一个子元素的li元素
    color:red;
}
ul > li:last-child{// li且是最后一个元素的li元素
    color: blue;
}
span:only-child{// span且在它父元素下是唯一的span元素；建议把父元素写出来
    color: green;
}
span:only-of-type{// span且在它父元素下是唯一类型的span元素；建议把父元素写出来
    color:green;
};

5. 伪类选择器之UI选择器(input标签用)

序号	选择器	名称	说明	css版本
1	:enabled	表单元素选择器	input非disabled时	2
2	:disable	表单元素选择器	input标签disabled时	1
3	:checked	表单元素选择器	input标签checked时	2
4	:default	表单元素选择器	选择元素之后插入内容	2
5	:valid	表单元素选择器	选择元素之后插入内容	2
6	:invalid	表单元素选择器	块级首字母	1
7	:required	表单元素选择器	选择元素之前插入内容	2
8	:optional	表单元素选择器	选择元素之后插入内容	2

enabled和disable对input的大部分type都有效，除了checkbox/radio/range三个外。

checked和default不知道怎么用。貌似只在opera上有效。

valid和invalid，是表单校验时使用，自己手动添加valid和invalid属性无用，必须是inp
ut使用pattern和required校验。

6. 伪类选择器之动态伪类

序号	选择器	名称	说明	css版本
1	:link	动态伪类选择器	未被访问时	2
2	:visited	动态伪类选择器	已被访问时	1
3	:hover	动态伪类选择器	鼠标以上时	2
4	:active	动态伪类选择器	访问中跳转页面时	2
5	:focus	动态伪类选择器	获得焦点时	2

link/visited/hover/active是有顺序的，其他顺序可能无效，这是个坑。

focus用在input获取焦点时使用。

7. 伪类选择器之其他

序号	选择器	名称	说明	css版本
1	:not	动态伪类选择器	反选	1
2	:empty	动态伪类选择器	空内容	2
3	:lang	动态伪类选择器	包含lang元素	2
4	:target	动态伪类选择器	url中有target时	2

示例代码：

ul > li:not(:first-child){
    color:red;
}
ul > li:not(:last-child){
    border: 1px solid blue;
}
:empty{display:'none'}