谈谈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中，伪类用一个冒号:，伪元素用两个冒号::。

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