CSS伪类和伪元素

1.伪类：伪类用于某些选择器添加特殊的效果

超链接伪类

给a链接添加 几种状态：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

元素获取

伪元素不是真正的元素，不存在与文档之中，所以js无法对它进行操作。为什么叫它“元素”？因为我们可以对其进行跟元素几乎无差别的操作。

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

2.伪元素：CSS伪元素是用来添加一些选择器的特殊效果。最好使用双冒号，防止与伪类混淆

first-letter首字母

        first-letter伪元素用于向文本的首字母设置特殊样式：

p::first-letter {color: red;}

其他常见的伪元素选择器

        ：：first-line 首行

        ：：first-letter 首字母

        ：：before 元素前插入

        ：：after 元素后插入

3.伪类与伪元素的区别

如果想要给第一项添加样式，可以在为第一个

• 添加一个类，并在该类中定义对应样式

如果不用添加类的方法，我们可以通过给设置第一个

• 的:first-child伪类来为其添加样式。这个时候，被修饰的
• 元素依然处于文档树中。

如果想要给该段落的第一个字添加样式，可以在第一个字中包裹一个元素，并设置该span元素的样式 如果不创建一个元素，我们可以通过设置 的::first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。 除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。 建议使用双冒号的写法，更容易识别出是伪类还是伪元素。