CSS之伪类选择器和伪元素

伪类选择器

伪类专门用来表示元素的一种状态，比如访问过的超链接和未访问的超链接，比如获得焦点的文本框

当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

浏览器通过历史记录来判断链接是否访问过

例：

1、a:link 普通链接伪类

2、a:visited 已访问链接伪类，为了保护用户隐私只能设置color属性

3、a:hover 鼠标移入的伪类

4、a:active 鼠标点击状态的伪类

:hover 和 :active对其他元素也可以设置

5、:focus 获取焦点的伪类选择器

6、::selection 选中内容状态的伪类选择器  【注意：在Chrome以外的浏览器并不适用，如需支持其他浏览器应进行其他相关设置

如：火狐浏览器==》p::-moz-selection{color:blue;}，如需兼容不同浏览器应都写】

伪元素

使用伪元素来表示元素中的特殊位置

1、p:first-letter{
                color: blue;
                font-size: 20px;
            }

P标签第一个字符伪元素

2、p:first-line{
                background-color: aqua;
            }

P标签第一行伪元素

3、p:before 表示元素最前面的部分，一般before都需要结合content这个样式一起使用

           p:before {
                content: "最前面";
            }
            p:after {
                content: "最后面";
            }

:after表示元素最后面的部分