CSS之伪元素和伪类

1. 首先弄清楚伪元素和伪类的区别：

  w3c上是这么说的：

1. CSS 伪类用于向某些选择器添加特殊的效果。
2. CSS 伪元素用于向某些选择器设置特殊效果。

  伪类就像是一个类名，它只是把你想要的元素区分出来，那些元素本身就存在，而伪元素则表现得像是“新建了一个元素”一样，以这样的形式去寻找你想要的内容。
  伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，所以，一个“像类”（伪类），一个“像元素”（伪元素）。

  css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
  但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

2.伪类

  包括如下几种：
  W3C：”CSS” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式，例如当鼠标按下去的时候	1
:focus	向拥有键盘输入焦点的元素添加样式。例如当input输入框聚焦的时候	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。例如当a标签鼠标点击完成	1
:first-child	向元素的第一个子元素添加样式。 提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素，其实这是错误的。 必须同时满足如下两个条件：   1.此元素是其直接父元素的第一个子元素。   2.此元素是p标签。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

3.伪元素

  包括如下几种：
  W3C：”CSS” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
::first-letter	向文本的第一个字母添加特殊样式。	1
::first-line	向文本的第一行添加特殊样式。	1
::before	在元素之前添加内容。这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。	2
::after	在元素之后添加内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。	2

---

  主要说一下::before 和 ::after

  这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

1. [String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。
   a::after { content: "hello world"; }
2. attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。
   a::after { content:attr(href); }
3. url() / uri() – 用于引用媒体文件。
   a::after { content: url('https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'); }
4. counter() – 调用计数器，可以不使用列表元素实现序号功能。
   h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) "." }

这两个伪元素的使用场景：

  1. 清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动(其中_zoom:1是为了兼容IE6、7，因为它们不识别after)：

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { _zoom:1; }

  2. 特效妙用
  除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”” 。否则，其他的样式属性一概不会生效。

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }