目录

CSS 选择器的功能是从 HTML 页面中查找特定类型的元素。 下表列出了几种常用的 CSS 选择器。

伪选择器比较特殊，可以分为伪元素和伪类元素。

1. 属性选择器

1.E[att^=value]属性选择器

E[att^=value]属性选择器是指选择名称为E的标签，该标签定义了att属性，att属性值包含以value为前缀的子字符串。 需要说明的是，E可以省略。 如果省略，则表示任何满足条件的元素都可以匹配。

2.E[att$=value]属性选择器

E[att$=value]属性选择器是指选择名称为E的标签，该标签定义了att属性，att属性值包含以value为后缀的子字符串。 与E[att^=value]选择器一样，E元素可以省略，如果省略则表示任何满足条件的元素都可以匹配。

3.E[att*=value]属性选择器

E[att*=value]选择器用于选择名为E的标签，该标签定义了att属性css三种选择器，att属性值包含value的子字符串。 这个选择器与前两个选择器相同，E元素也可以省略。 如果省略，则表示任何满足条件的元素都可以匹配。

2.关系选择器

1. 子选择器(>)

子选择器主要用于选择元素的第一级子元素。 例如，如果你想选择一个强元素，它只是h1元素的子元素，你可以写：h1>strong。

2. 兄弟选择器（+、~）

兄弟选择器用于选择与某个元素位于同一父元素且位于该元素后面的兄弟元素。 兄弟选择器有两种类型：相邻兄弟选择器和普通兄弟选择器。

(1) 相邻兄弟选择器

该选择器使用减号“+”来链接前后两个选择器。 选择器中的两个元素具有相同的父元素，并且第二个元素必须紧跟在第一个元素之后。

(2)普通兄弟选择器

普通的兄弟选择器使用“~”来链接前后两个选择器。 选择器中的两个元素具有相同的母元素，但第二个元素不需要紧跟在第一个元素之后。

3.结构伪类选择器：根选择器

:root 选择器用于匹配文档的根元素。 在 HTML 中，根元素仍然是 html 元素。 也就是说“:root选择器”定义的样式对所有页面元素都有效。 对于不需要该样式的元素，可以单独设置样式来覆盖它。 ：不是选择器

如果您对结构元素使用样式，但想要排除该结构元素下面的子结构元素，以便它不使用此样式，则可以使用 :not 选择器。

如：body *:not(h3):only-child 选择器

:only-child选择器用于匹配父元素唯一的子元素，即如果父元素只有一个子元素css三种选择器，则可以使用“:only-child选择器”选择子元素。 :first-child 和 :last-child 选择器

:first-child 和 :last-child 选择器分别用于设置父元素的第一个或最后一个子元素的样式。 :nth-child(n) 和 :nth-last-child(n) 选择器

使用 :first-child 选择器和 :last-child 选择器可以选择父元素中的第一个或最后一个子元素，但如果用户想要选择第二个或倒数第二个子元素，这两个选项设备不支持不再工作了。 为此，CSS3 引入了 :nth-child(n) 和 :nth-last-child(n) 选择器，它们是 :first-child 选择器和 :last-child 选择器的扩展。 :nth-of-type(n) 和 :nth-last-of-type(n) 选择器

在上一节中，我们介绍了 :nth-child(n) 和 :nth-last-child(n) 选择器并实现了一些简单的页面效果。 本节将介绍 :nth-of-type(n) 和: nth-last-of-type(n) 选择器，这两个选择器的区别在于： nth-of-type(n) 和: nth-last -of-type(n) 选择器用于匹配特定类型元素的父元素的第 n 个子元素和最后的第 n 个子元素，而 :nth-child(n) 和 :nth-last-child(n)选择器用于匹配属于父元素子元素的第n个子元素和最后第n个子元素，无论元素类型如何。

:nth-of-type 的值还可以设置为 odd 或 2n-1（奇数）、even 或 2n（偶数），即选择所有按偶数或奇数排序的元素：空选择器

:empty 选择器用于选择所有没有子元素或空文本内容的元素。 : 目标选择器

:target 选择器用于指定页面中目标元素的样式（元素的 id 用作页面中的超链接）。 只有当用户点击页面上的超链接并跳转到目标元素后，:target选择器设置的样式才会生效。

PS：使用中

嵌套标签时要小心，

标签不能嵌套块级元素，甚至不能嵌套

元素，只有行内元素可以嵌套，否则

嵌套块级元素集 CSS 不起作用。

例如：使用:only-child选择器来修改

嵌套元素来看看是否有效。

	
		
		
		
			h1:only-child{
				color: red;
			}
			li:only-child{
				color:red;
			}
		
	
	
		

			
星际穿越
		

		

			
海贼王
		
		

			
斗罗大陆
			
武庚纪
			
斗破苍穹
		
	

页码疗效：

效果很明显，嵌套在

元素上方子元素的字体颜色没有变成红色，说明

嵌套块级元素设置 CSS 不起作用。

4. 伪元素选择器

1.:选择器之前

:before 伪元素选择器用于在被选元素内容之上插入内容，必须配合 content 属性来指定具体插入的内容。 其基本句型如下：

：前

内容：文本/url();

在上面的句型中，选中的元素位于“:before”之前，“{}”中的content属性用于指定要插入的具体内容，可以是文本，也可以是图像。

2.:选择器之后

:after 伪元素选择器用于在元素后面插入一些内容，与 :before 选择器的方式相同。

五、链接伪类

1.链接伪类

在CSS中，可以通过链接伪类来实现不同的链接状态。 所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标签名、类名或id名加“:”组成。 超链接标签有4个伪类，如下表所示。