CSS学习 伪类和伪元素

伪类，伪元素及其选择器

一. 定义：

在当考虑锚元素（a）时，在HTML和XHTML中会建立从一个文档到另一个文档的链接。实际上有两种基本的锚类型：已访问的和未访问的。这些类型被称作伪类（pseudo-class），使用这些伪类的选择器叫做伪类选择器（pseudo-class selector）。

看了这么多复杂的定义是不是依旧不明白什么是伪类 吧？

没事接着看，接下来我会用一种简单的方式帮助你理解?

首先，我们知道众多种类的选择器的作用只有一个——为HTNL文档赋予样式。而在HTML文档中有许多未知的事件或者结构，伪类选择器就是为那些在文档中不一定存在的结构指定样式或者为某些元素的状态所指示的幻象类指定样式。

（二）分类：

（1）静态伪类

伪类名	描述
:link	指示作为超链接（即有一个href属性并指向一个未访问地址的所有锚。注意，有些浏览器可能会不正确的将:link解释为指向任何超链接，包括已访问的和未访问的的超链接）
:visited	指示作为已访问的超链接
:first-child	选择第一个子元素（选择的作为子元素的第一个元素）

通俗点来讲?，:ink是用来给未访问的那些不好看的链接添加更加好看的样式吗，而:visited是用来给那些已经访问过的链接添加样式。

那么，:visited就很好理解了如果被浏览器发现你曾经访问过这个页面，:visited定义的样式就会在这时显现出来。

这样看起来，第一个伪类看起来不是很无用，甚至有点多余。毕竟，一个锚未访问过，那么它肯定是未访问过的链接，但是还会有下面这种情况。
a:link { color: aqua; } a{color: #f40;｝

<a href="qqq">百度</a>
<a name:"section-4">4.hello-world</a>`

为了更加精准的使用样式，我们就有必要使用:link从而做出我们想要的样式。?

·
·
·

而first-child的作用效果如下：

（2）动态伪类

动态伪类	描述
:focus	指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素
:hover	指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
:active	指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标时，就会激活这个超链接，:active将指示这个超链接

例如：

:focus的效果

:hover

:active

上述效果图中黄色背景部分均表示鼠标选中。

（三）伪元素选择器

就像伪类为锚指定幻像类一样，伪元素能够在文档中插入假想的元素，从而的到某种效果

选择器	功能描述	版本
E:last-child	选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1)	3
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算	3
E:nth-last-child(n)	选择父元素的倒数第n个子元素，n从1开始计算	3
E:first-of-type	选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)	3
E:last-of-type	选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)	3
E:nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素	3
E:nth-last-of-type	与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素	3
E:only-child	选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)	3
E:only-of-type	选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)	3
E:empty	选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点	3

注意：！！！ 所有的伪元素必须都放在该为元素的选择器的最后面