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

前言

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

一、伪元素选择器

1）：first-letter 该类选择器主要用于向指定的选择器添加指定的效果。选择“块级元素”文本段落中的首个字符，只能对“块级元素”生效。 首先，元素的display计算值必须是 block, inline-block, table-cell, list-item或者table-caption，其他所有display计算值都没有用，包括display:table以及display:flex等。该选择器可以设置的值有：

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;}

2）：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;}

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

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

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

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

二、伪类选择器

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

1）动态伪类选择器

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

（1）：link 选择器匹配超链接， :visited选择器匹配用户已经访问过的超链接

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

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

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

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

三、结构性伪类选择器

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

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

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

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

（3）：nth-child

• 选择器跟上一节讲的子元素选择器类似，但使用这类选择器可以制定一个索引以匹配特定位置的元素。下方列表简单的总结了这类选择器：
• 选择器说明：nth-child（n） 选择父元素的第n个子元素：nth-last-child 选择父元素的倒数第n个子元素：nth-of-type（n） 选择父元素定义类型的第n个子元素：nth-last-of-type（n） 选择父元素定义类型的倒数第n个子元素

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

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