CSS：CSS选择器之【伪类/元素选择器】

前言

目前为止，我们已经学习了如何使用HTML文档中定义的元素选择文档的内容。CSS中还定义了伪选择器，它们提供了更复杂的功能，但非直接对应HTML文档应以的元素。伪选择器主要分两种：伪元素和伪类。

伪元素选择器

该类选择器主要用于向指定的选择器添加指定的效果。

：first-letter

选择“块级元素”文本段落中的首个字符，只能对“块级元素”生效。

该选择器可以设置的值有：

• font属性

• color属性

• background属性

• margin属性

• padding属性

• border属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• float属性

• clear属性

使用示例如下：

p: first-letter {    border: 2px solid black;    color: blue;    border-radius: 5px;    padding: 5px;}

：first-line

选择“块级元素”文本段落中的首行文本，只能对“块级元素”生效。

该选择器可以设置的值有：

• font属性

• color属性

• background属性

• word-spacing属性

• letter-spacing属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• clear属性

使用示例如下：

p: first-line {    border: 2px solid black;    letter-spacing: 5px;    color: blue;}

：before

在指定的选择器之前插入一段内容。插入的内容默认为“行内元素”，可以通过“display”强制转换显示类型。

代码示例：

/*插入文本*/p:before {    content: "插入文本";    color: red;}/*插入图片*/div:before {    content: url(../img.jpg);    width: 100px;    height: 100px;}

：after

在指定的选择器之后插入一段内容，使用方式和“:before”一样。插入的内容默认也是为“行内元素”，同样可以通过“display”强制转换显示类型。代码示例同“:before”。

提示：使用“:before”和“:after”伪元素选择器不仅能为指定的元素添加文字、图片和各种利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件，而且具有高度自定义性。

伪类选择器

伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。

动态伪类选择器

之所以称为动态伪类选择器，是因为它们根据条件的改变匹配元素，是相对于文档的固定状态来说的。随着JavaScript广泛用于修改文档内容和元素状态，动态选择器和静态选择器之间的界限越来越模糊，不过，动态伪类选择器仍然是一类比较特别的选择器。

：link 和：visited 选择器

：link选择器匹配超链接，：visited选择器匹配用户已经访问过得超链接。

使用：visited选择器可以应用到链接元素的属性不多。你可以改变颜色和字体，不过仅此而已。

提示：：visited选择器匹配用户在所有页面访问过的href属性为URL的任意链接，而不只是你的页面。：visited最常见的用法就是针对已访问的链接应用某种样式，从而让它们跟未访问的链接有所区别。比如我们看新闻，看过的新闻和没有看过的新闻在首页列表呈现的状态是不一样的，便于我们区分。

：hover 选择器

：hover选择器匹配用户鼠标悬停在其上的任意元素。

：active 选择器

：active选择器匹配当前被用户激活的元素（一般情况下为鼠标点击该元素）。

：focus 选择器

：focus选择器匹配获得焦点的元素，常用于 input 元素。

结构性伪类选择器

使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（：），例如：empty。他们可以单独使用，也可以跟其他选择器组合使用，如p：empty。

使用：root 选择器（根元素选择器）

：root 选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器，因为总是返回html元素，一般不用。

使用子元素选择器

使用子元素选择器匹配直接包含在其他元素中的单个元素。下方列表简单的总结了这类选择器：

选择器 说明 ：first-child 选择元素的第一个子元素 ：last-child 选择元素的最后一个子元素 ：only-child 选择元素的唯一子元素 ：only-of-type 选择元素制定类型的唯一子元素

使用nth-child选择器

：nth-child选择器跟上一节讲的子元素选择器类似，但使用这类选择器可以制定一个索引以匹配特定位置的元素。下方列表简单的总结了这类选择器：

选择器 说明 ：nth-child（n） 选择父元素的第n个子元素 ：nth-last-child 选择父元素的倒数第n个子元素 ：nth-of-type（n） 选择父元素定义类型的第n个子元素 ：nth-last-of-type（n） 选择父元素定义类型的倒数第n个子元素

UI元素状态伪类选择器

使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：

选择器 说明 ：enabled 选择启用状态的元素 ：disabled 选择禁用状态的元素 ：checked 选择被选中的input元素（只用于单选按钮和复选框） ：default 选择默认元素 ：valid 根据输入验证选择有效或者无效的input元素 ：in-range/：out-of-range 选择在制定范围之内或者职位受限的input元素 ：required/：optional 根据是否允许：required属性选择input元素