css基础-选择器

css选择器大全

1.基本选择器

序号	选择器	名称	说明	css版本
1	*	通用选择器	选择所有元素，对所有元素设置样式，包括html和body	2 扫描二维码关注公众号，回复： 3842589 查看本文章
2	div,span	标签(元素)选择器	根据标签选择元素	1
3	#	id选择器	选择指定id元素	1
4	.	类选择器	选择指定class	1
5	[attr]	属性选择器	根据元素属性去选择	2-3

属性选择器的几种用法(了解)

[href] {color: red;} 含有href属性（样式才会生效）

[href][title]{color:red;}同时含有href和title属性。

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

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

[href*="baidu"] {color: red;}含有baidu这个字符窜

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

[class|="def"] {color: red;}类名为def或者def-开头的class

[title~="big"] {font-size: 30px;}title中属性里含有big这个字符窜。

 

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	伪元素选择器	光标滑动选择内容	3

::after应用较多的地方：清浮动

4. 伪类选择器之结构性伪类选择器(了解)

序号	选择器	名称	说明	css版本
1	:root	根元素选择器	文档根元素，一般为html	3
2	:first-child	子元素选择器	第一个子元素	2
3	:last-child	子元素选择器	最后一个子元素	3

5. 伪类选择器之表单元素 (input标签用)(了解)

序号	选择器	名称	说明	css版本
1	:enabled	表单  元素选择器	input非disabled时	3
2	:disable	表单元素选择器	input标签disabled时	1
3	:checked	表单元素选择器	input标签checked时	2
4	:default	表单元素选择器	浏览器默认选择的那个	2

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

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

link/visited/hover/active是有顺序的，其他顺序则无效,如果你只用hover没有限制

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

总结：在写网页的过程中用的较多的有类选择器、id选择器、分组选择器、后代选择器、伪类选择器::after ::before、：hove