CSS伪类选择器

 伪类，用来专门表示元素的一种特殊的状态。比如：访问过的超链接，普通的超链接，获取焦点的文本框。当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

常用的伪类有以下几个：

a:link {color: #FF0000} /* 设置未访问的链接样式 */

a:visited {color: #00FF00} /* 设置已访问的链接样式 */

a:hover {color: #FF00FF} /* 设置鼠标移动到链接上样式 */

a:active {color: #0000FF} /* 设置选定的链接样式 */

用法举例：

a:link{  /*为没有访问过的链接设置一个颜色*/
    color: aqua;
    font-size: 20px;
}
a:visited{ /*为访问过的链接设置一个颜色*/
    color: #FF7F50;
    font-size: 10px; /*设置了字体但是不会生效，访问过的只能定义修改字体颜色 */
}
a:hover{ /*设置鼠标滑过的样式*/
    font-size: 30px;
    color: blue;
}
a:active{ /*设置点击时的样式*/
    color: black;
    background-color: #0000FF;
    font-size: 5px;
}

其他的一些不常用的：

-:focus 获取焦点

-:befor 指定元素前,

-:after 指定元素后

-::selection 选中的元素

before表示元素最前边的部分，after表示元素最后的部分，一般都需要结合content这个颜色一起使用，通过content可以向before或者after的位置添加一些内容

用法举例：

#ptest:before{
    content: "出现在段落最前边的";
    color: blue;
}
#ptest:after{
    content: "出现在段落最后边的";
    color: chartreuse;
}
#input:focus{ /*设置获取焦点的样式*/
    background-color: #0000FF;
    color: #FF7F50;
}
p span::selection{ /*设置选中的样式*/
    background-color: aqua;
    font-size: 1.875rem; /*不能改变字体颜色，此样式设置在这里无效*/
    color: #0000FF;
}

给段落定义样式的：

-:first-letter 设置首字母

-:first-line 设置首行

用法举例：
 

#ptest:first-letter{ /*设置第一个字的样式*/
    font-size: 20px;
    color: #FF7F50;
}
#ptest::first-line{  /*设置第一行的样式*/
    font-size: 15px;
    color: aqua;
}