CSS选择器

目录

1、基本选择器

1）标签选择器

2）id选择器

3）类选择器

4）通配选择器

2、交集选择器

3、派生选择器

1）后代选择器

2）子元素选择器

3）兄弟选择器

4）邻居选择器

4、属性选择器

1）简单属性选择器

2)具体属性选择器

3）子串属性选择器

5、伪类选择器

1) :first-child 和 ：last-child

2) :nth-child(n)

3）状态伪类

6、伪元素选择器

7、结构伪类选择器

1、:root

2、:not

3、:empty

4、:only-child

5、:target

---

1、基本选择器

1）标签选择器

标签选择器指用HTML元素的标签名做选择器的名字。被标签选择器定义的样式，所有同名HTML标签都会自动套用该样式，我们通常把所有同类标签都相同的样式标签选择器定义。

//直接使用div标签选择 并添加样式
div{
    color:red;
    font-size:16px;
}

2）id选择器

id选择器以“#”开头，选择器名称自定义，可以包含字母、数字、下划线或美元符号，必须以字母或下划线开头，id选择器定义的样式，HTML中具有同名id属性的元素会套用，HTML元素的id选择器属性必须是唯一的，因此，一个id选择器样式唯一对应一个HTML元素，我们通常把元素特有的样式用id选择器来定义。

	
		
		
		
	
	
		

			id选择器
		
	

3）类选择器

类选择器是以“.”开头，选择器名称自定义，可以包含字母、数字、下划线或美元符号，必须以字母或下划线开头。类选择器定义样式，HTML元素包含同名 class 属性的元素会套用，多个 HTML 元素可以拥有相同的 class 属性值，因此一个类选择器样式可以被多个 HTML 元素套用，我们通常把多个 HTML 元素共有的样式用类选择器来定义。

	
		
		
		
	
	
		

			类选择器
		
	

4）通配选择器

通配选择器用 “*” 表示，*{} 该选择器表示选中页面的所有元素。

2、交集选择器

交集选择器是由两个选择器直接连接构成的，selector1.selector2,其中selector1必须是标签选择器，selector2可以是类别选择器、id选择器、或伪类选择器、伪元素选择器，两个选择器之间不能有空格，必须连续书写。

p.one{
    color:red;
    font-size:16px;
}
h1#two{
    font-size:30px;
    color:blue;
}

3、派生选择器

1）后代选择器

selector1 selector2

selector1 和 selector2 可以是任意类型的选择器，他的选择范围是selector1 后代中的 selector2。只要 selector2 是 selector1 的后代元素都可以被选中，后代选择器中两个元素之间的层次间隔可以是无限的。

2）子元素选择器

selector1 > selector2

 子元素选择器只能选择 selector1 选择范围内元素的直接子元素。

3）兄弟选择器

selector1 ~ selector2

兄弟选择器是在选择器 selector1 所选择元素后面的、并且拥有相同父节点的元素中查找符合sekector2 条件的元素，也就是说 selector1 同父元素且在 selector1 后的所有 selector2。

4）邻居选择器

selector1 + selector2

邻居选择器和兄弟选择器类似但是它只选择 selector1 所选择元素后面的且拥有相同父节点元素的第一个元素。

4、属性选择器

1）简单属性选择器

简单属性选择器只有属性名，表示只要有这个属性，不管值是什么，都会被选择。

//具有 href 属性的  元素
a[href] {color : red;}
//具有 type 属性的所有元素
*[type] {color : red;]

2)具体属性选择器

除了拥有属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

//选择所有表单元素中仅选择文本框元素
input[type="text"]{background:yellow;}

3）子串属性选择器

具有属性选择器中的属性值必须完全匹配的时候才能被选择，CSS还提供了5中子串属性选择器，只要元素属性值中包含选择器中设定的值，就会被选中。

子串属性选择器

类型	描述
[attr^="val"]	选择attr属性值以 val 开头的所有元素
[attr$="val"]	选择attr属性值以 val 结尾的所有元素
[attr*="val"]	选择attr属性值中包含子串 val 的所有元素
[attr~="val"]	选择attr属性值中包含 val 的元素， val 是一个独立的属性值
[attr|="val"]	选择attr属性值以 val 开头的所有元素，val 必须是一个单词

5、伪类选择器

1) :first-child 和 ：last-child

伪类选择器 :first-child 选择第一个元素，伪类选择器 :last-child 选择最后一个元素。他们的使用方式都一样，一个是从前往后选，一个是从后往前选。

	
		
		
		
	
	
		

			
第1个段落
			
第2个段落
			
第3个段落
			
第4个段落
		
	

2) :nth-child(n)

:nth-child(n) 的使用原则和 :first-child 相同，这里的参数 n 可以是数字、关键字或公式。

	
		
		
		
	
	
		

			
第1个段落
			
第2个段落
			
第3个段落
			
第4个段落
		
	

参数 n 可以使用 odd 和 even 关键词代替，odd 表示排序为奇数的元素， even 表示排序为偶数的元素。

	
		
		
		
	
	
		

			
第1个段落
			
第2个段落
			
第3个段落
			
第4个段落
		
	

3）状态伪类

常用状态伪类

选择器	描述	常用标签
:link	未被访问的元素
:visited	已被访问的元素
:hover	鼠标指针位于元素上
:active	鼠标指针在元素上左键被按下还没有松开
:focus	获取焦点的元素
:checked	被选中的元素

6、伪元素选择器

常用的伪元素选择器

选择器	描述
:first-letter	内容文本的第一个字母
:first-line	内容文本的第一行字母
:before	在元素之前添加内容
:after	在元素之后添加内容

7、结构伪类选择器

1、:root

:root 选择器可以匹配文档根元素，在 HTML 中，根元素始终是 HTML 元素，因此当 :root 单独使用时，就表示 标签，也可以和后代选择器配合使用，表示指定范围内的元素

2、:not

:not 选择器的完整用法是 ":not(selector)" 匹配非指定元素/选择器的每个元素，这个选择器在使用时要慎重。例如以下代码，本意是想将

和

两个标签中的文字设置为红色，但是运行后会发现所有文字的颜色都变为红色。这是因为 :not 选择器相对于整个网页匹配非

元素，所以 、 都在选择范围之内。有以下两种修改方法。

	
		
		
		
	
	
		

			
标题标签
			
第1个段落
			
第2个段落
			
第3个段落
			
第4个段落
			
div标签
		
	

 

1）通过后代选择器缩小选择范围

如果把选择范围定义在 标签的子元素，那么除

标签外的标签就只有

和

。因此修改选择器":not(p)" 为 "body>:not(p)" 通过后代选择器把选择范围定义在 标签的所有直接子元素。

2）重定义

标签样式

还可以在 css 样式表中重定义

标签样式，设置字体颜色为黑色。

3、:empty

:empty 选择器用于匹配没有子元素的每个元素，所有单标签一定不包含子元素，所以都属于 :empty 选择器的选择范围，对于双标签，只有开始标签和结束标签紧紧相连的情况下才符合，哪怕只有一个空格，也不会被选中。

:empty 选择器可以和交集选择器结合使用，用于限定某一种标签的非空元素。

	
		
		
		
	
	
		

			
第1个段落
			
第2个段落
			
			
 

			

		
	

4、:only-child

:only-child 选择器用于匹配属于父元素的唯一子元素的每个元素，通常和交集选择器结合使用，用于限定某一种标签的父元素只有它一个子元素。如以下代码运行后发现只有“我是唯一的”段落会添加样式。

	
		
		
		
	
	
		

			
我是唯一的
		
		

			
			
我有一个兄弟
		
	

5、:target

:target 选择器可用于选取当前活动的目标元素。URL 后面跟有锚名称 # ，用于执行文档内某个具体的元素，这个被链接的元素就是目标元素。设置了这个选择器后，当单击锚记链接转跳到目标位置时，目标元素就会应用选择器样式。