web前端-------伪类和伪元素

但是，网页中一些特殊的样式，需要用到特殊的CSS选择器来设置。在CSS中，我们把这类选择器称为伪选择器。

伪选择器，分为伪类选择器和伪元素选择器两个大类。

伪类选择器，简称伪类；伪元素选择器，简称伪元素。

在网页中，有些元素的状态是动态变化的，该元素会根据其状态呈现不同的样式。比如，未访问的链接为：带有下划线的蓝色文本,访问过的链接为：带有下划线的紫色文本。

1.要达到这种效果，就需要使用状态伪类。

在网页中，链接通常会有四种不同的状态，分别是未访问状态、已访问状态、鼠标悬停状态、链接点击状态。

这时候，就需要:link、:visited、:hover和 :active四种状态伪类，依次为链接的四种状态，来设置不同的样式。

(1):link伪类，可以设置「未访问状态」的样式。:浏览器中，未访问的链接默认为蓝色。

(2）visited伪类，可以设置「已访问状态」的样式。

（3）:hover伪类，可以设置「鼠标悬停状态」的样式。

                将鼠标经过或悬停在链接上，观察颜色变化。        

（4）active伪类，可以设置「点击时状态」的样式。单击链接不松开，观察颜色变化。

（5）focus伪类：它表示在元素获得焦点时，向元素添加特殊的样式。

在网页中，有时我们需要对特定位置的元素设置一些样式。比如，有若干个p元素，都没有class属性，那么我们如何给某个或某些p元素设置样式呢？

2.这时候，我们就可以使用结构伪类来进行设置。

（1）:first-child伪类:first-child伪类，用于匹配第一个子元素。

（2）:last-child伪类:last-child伪类，用于匹配最后一个子元素。

（3）:nth-child(n)伪类，就十分灵活了，它可以用于匹配第n个子元素。

也就是说，:nth-child(n)伪类可以匹配任意一个子元素，十分方便。

不仅如此，它还能一次性匹配多个子元素。

因为，它的小括号()中的n，不一定是具体的数字，也可以是一个an+b形式的参数。

使用p:nth-child(2n)，匹配父元素body的偶数位置的子元素p，

使用p:nth-child(2n+1)，匹配父元素body的奇数位置的子元素p，

3.伪元素和伪类的本质区别就在于，它创造了新的元素，而非添加一些样式。