css选择器——伪类/伪元素选择器
伪元素选择器
该类选择器主要用于向指定的选择器添加指定的效果。
：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元素
————————————————
版权声明：本文为CSDN博主「Hierarch_Lee」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hierarch_lee/article/details/52609400
