谈谈css伪类与伪元素

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus、:hover以及<a>标签的:link、:visited等，伪元素较常见的比如:before、:after等。

在这里也许有不少人都见过:before，::before这样的写法，估计有些人很纳闷，这两者有什么区别吗？

有疑问，那我们就先把疑问解决了先，不要把疑问留着。其实:before，::before这两种写法都是等效，只是:befor是CSS2的写法，::before是CSS3的写法。双冒号(::)这是CSS3 规范中的要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。一般情况下为兼容性考虑使用单冒号(:)。

解决完疑问，那我们就可以愉快的开始接下来的内容了。

伪类 - pseudo classes

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息（例如<a>标签的:link、:visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取）以及不能被常规CSS选择器获取到的信息（例如要修改第几个子元素的样式）。

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用：

selector.class : pseudo-class {property: value}

伪类选择器（这里的伪类选择器等效于文中所涉及到的伪类）与我们常用的类选择器的区别是：类选择器可以随便起名，譬如“p.right”，然后在页面p标签的class类中加入类“right”，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。下面是一些我们常见的伪类选择器：

:active —— 样式添加到正在被激活的元素 
:focus —— 样式添加到获得焦点的元素 
:hover —— 样式添加到鼠标悬浮的元素 
:link —— 样式添加到未被访问过的链接 
:visited —— 样式添加到已经访问过的链接 
:first-child —— 样式添加到第一个子元素 
:lang —— 样式添加到指定lang语言的标签

如何理解伪类可以通过选择器找到那些不存在与DOM树中的信息，我们看看下面这个栗子：

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。显然这个些状态并没有存在DOM树的信息里面。

我们再来看个栗子：

p:first-child {
    color: red;
}

<div>
    <p>我是文本</p>
    <p>我是文本</p>
</div>

这个效果相当于下面的常规写法：

.red{
    color: red;
}

<div>
    <p class="red">我是文本</p>
    <p>我是文本</p>
</div>

再举个栗子，通过:nth-child()伪类可以实现一些很有意思的效果，比如：

table tr:nth-child(2n) td{
   background-color: #ccc;
}
table tr:nth-child(2n+1) td{
   background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

上面的代码将所有偶数行背景色设置为#ccc，不能被5整除的奇数行设置背景色#fff，能够被5整除的奇数行设置背景色#f0f。这如果要用常规CSS去实习这效果，恐怕没法搞吧，因为常规CSS选择器并没办法获取到这些元素的位置信息。

CSS3中还引入了许多新的伪类，感兴趣的可以参考这里。

伪元素 - Pseudo-elements

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

上面段话是伪元素的清晰定义，也是伪元素与伪类最大的区别。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

常见的伪元素种类：

:first-letter —— 样式添加到文本首字母
:first-line —— 样式添加到文本首行
:before —— 样式添加到元素之前
:after —— 样式添加到元素之后

伪元素的由两个冒号::开头，然后是伪元素的名称，使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。


来看个栗子：

p:first-letter {
    color: red;
}

<p>我是文本</p>

其效果相当于：

span {
    color: red;
}

<p><span>我</span>是文本</p>

效果如下：

注意：一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

再来看看利用伪元素实现分割线的效果：

.spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}

<p class="spliter">分割线</p>

效果如下：

再来看一个：

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-div::before {
    content: "♥";
    color: red;
}
.test-div::after {
    content: "♥";
    color: blue;
}

<div class="test-div">helloworld</div>

效果如图：

利用伪元素其实还能实现很多效果，比如阴影效果、图像的形变效果、气泡效果等等，在这里我就不在贴出来了。师傅领进门，修行在个人，大家感兴趣的话百度一下，就有很多。

总结：

• 伪类的效果需要一个实际的类才能达到，而伪元素需要一个实际的元素才能达到。

• 伪类可以同时运用多个，而伪元素只能一次用一个。

• 在CSS3中，伪类用一个冒号:，伪元素用两个冒号::。

• 为兼容性考虑需要使用一个冒号的格式。