CSS3伪类和伪元素

1.伪类

CSS3给出的定义是：

伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

通过上面的概念我们知道了伪类的功能有两种：
1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过:first-child 来获取到。

2.伪元素

CSS3给出的定义如下：
伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

3.伪类和伪元素的区别（CSS3下的区别）

通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

4.主要用法

4.1伪类

1 :first-child匹配第一个子元素。
2 :last-child 匹配最后一个子元素。
HTML：

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>   

CSS：

li:first-child {
  color: red; // 第一个 li 会变红
}
li:last-child {
  color: red; // 最后一个 li 会变红
}

3 :first-of-type匹配属于其父元素的第一个特定类型的子元素。
4 :last-of-type匹配属于其父元素的最后一个特定类型的子元素。
HTML：

<div>
    <h1>h1文本</h1>
    <p>p文本</p>
    <h1>h1文本2</h1>
</div>

CSS：

p:first-of-type {
  color: red;  // <p>标签的内容变为红色
}
h1:last-of-type {
  color: red;  // 倒数第一个<h1>标签的内容变为红色(h1文本2)
}

这里有必要强调一下 :first-child 与 :first-of-type 的区别。如果你的CSS写成:

p:first-child {
  color:red;
}

页面是不会有变化的，因为 <p>元素并不是父元素 <div>的第一个子元素。

4.2伪元素

1 ::before ::after
这两个伪元素下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。
[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a::after { content: "↗"; }
attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a::after { content:"(" attr(href) ")"; }
url() / uri() – 用于引用媒体文件。示例：
h1::before { content: url(logo.png); }
counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

2 ::first-letter匹配元素中文本的首字母。
3 ::first-line匹配元素中第一行的文本(只能在块元素中使用)。
4 ::selection匹配被用户选中的部分。

p::selection {
  color: red;
}

应用：清除浮动
清除浮动：浮动是因为使用了float:left或float:right或两者都有而使父级元素不能被撑开。
之前的方法：1)父级div定义 overflow:hidden

.clear-fix { overflow: hidden; zoom: 1; }

2)在父级</div>结束前加一个空的div引入class="clear-fix"样式。

.clear-fix:{ clear: both;}

现在的方法（用::after,不用添加空的div）：

.clear-fix::after { display: block; content: ""; width: 0; clear: both; }

特效
除了简单的添加字符，配合 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: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }

参考：
https://www.jianshu.com/p/996d021bced3
http://blog.dimpurr.com/css-before-after/