::BEFORE/:BEFORE
:before 伪元素与:after 类似，都可以为其他 HTML 元素添加内容（文本或图形）。同样，这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。需要在 CSS 中声明 content 属性。
记住，通过这个伪元素生成的内容不能通过其他选择符选中。
HTML:
<h1>Ricardo</h1>
CSS:
h1:before {
content: "Hello "; /* 注意Hello后面有一个空格 */}
结果网页中会变成这样：
Hello Ricardo!
注意： 看到“Hello ”后面的空格了吗？没错，空格也算数。
::AFTER/:AFTER
:after 伪元素也用于为其他 HTML 元素添加内容（文本或图形）。这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。为了使用这个伪元素，必须在 CSS 中声明 content 属性。
同样，通过这个伪元素添加的任何内容都无法通过其他选择符选中。
HTML:
<h1>Ricardo</h1>
CSS:
h1:after {
content: ", Web Designer!";}
结果如下：
Ricardo, Web Designer!
::BACKDROP (EXPERIMENTAL)
::backdrop 伪元素是在全屏元素后面生成的一个盒子，与:fullscreen 伪类连用，修改全屏后元素的背景颜色。
注意： ::backdrop 伪元素必须用双冒号。
还看前面:fullscreen 伪类的例子。
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
CSS:
h1:fullscreen::backdrop {
background: orange;}
看示例：http://codepen.io/ricardozea/pen/bEPEPE
::FIRST-LETTER/:FIRST-LETTER
:first-letter 伪元素选择一行文本第一个字符。
如果相应行前面包含图片、视频或表格元素，那么不会影响选择第一个字符。
这个伪元素非常适合对段落进行排版，有了它就不必用图片或其他技巧了。
提示： 这个伪元素也可以选中:before 伪元素生成的第一个字符。
CSS:
h1:first-letter {
font-size: 5em;}
::FIRST-LINE/:FIRST-LINE
:first-line 选择元素的第一行，只适用于块级元素，行内元素不适用。
即使一段文本有多行，也会选中第一行。
CSS:
p:first-line {
background: orange;}
::SELECTION
::selection选择文档中被高亮选中的部分。
注意，基于Gecko的浏览器要求使用前面：::-moz-selection。
注意： 在一条规则中同时使用带前缀和不还前缀的::selection是不行的，要分别写。
CSS:
::-moz-selection {
color: orange;
background: #333;}::selection {
color: orange;
background: #333;}
::PLACEHOLDER (EXPERIMENTAL)
::placeholder伪元素选择表单元素中通过placeholder属性设置的占位文本。
也可以写成::input-placeholder。
注意： 这个伪元素不是标准的，因此将来有可能会变化。
在某些浏览器（IE10及Firefox 18之前）中，::placeholder伪元素的实现类似一个伪类。其他浏览器都将其视为伪元素。因此，除非要兼容IE10或旧版本的Firefox浏览器，因此应该这样写：
HTML:
<input type="email" placeholder="name@domain.com">
CSS:
input::-moz-placeholder {
color:#666;}input::-webkit-input-placeholder {
color:#666;}/* IE 10 only */input:-ms-input-placeholder {
color:#666;}/* Firefox 18 and below */input:-moz-input-placeholder {
color:#666;}
::BEFORE/:BEFORE
:before 伪元素与:after 类似，都可以为其他 HTML 元素添加内容（文本或图形）。同样，这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。需要在 CSS 中声明 content 属性。
记住，通过这个伪元素生成的内容不能通过其他选择符选中。
HTML:
<h1>Ricardo</h1>
CSS:
h1:before {
content: "Hello "; /* 注意Hello后面有一个空格 */}
结果网页中会变成这样：
Hello Ricardo!
注意： 看到“Hello ”后面的空格了吗？没错，空格也算数。
::AFTER/:AFTER
:after 伪元素也用于为其他 HTML 元素添加内容（文本或图形）。这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。为了使用这个伪元素，必须在 CSS 中声明 content 属性。
同样，通过这个伪元素添加的任何内容都无法通过其他选择符选中。
HTML:
<h1>Ricardo</h1>
CSS:
h1:after {
content: ", Web Designer!";}
结果如下：
Ricardo, Web Designer!
::BACKDROP (EXPERIMENTAL)
::backdrop 伪元素是在全屏元素后面生成的一个盒子，与:fullscreen 伪类连用，修改全屏后元素的背景颜色。
注意： ::backdrop 伪元素必须用双冒号。
还看前面:fullscreen 伪类的例子。
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
CSS:
h1:fullscreen::backdrop {
background: orange;}
看示例：http://codepen.io/ricardozea/pen/bEPEPE
::FIRST-LETTER/:FIRST-LETTER
:first-letter 伪元素选择一行文本第一个字符。
如果相应行前面包含图片、视频或表格元素，那么不会影响选择第一个字符。
这个伪元素非常适合对段落进行排版，有了它就不必用图片或其他技巧了。
提示： 这个伪元素也可以选中:before 伪元素生成的第一个字符。
CSS:
h1:first-letter {
font-size: 5em;}
::FIRST-LINE/:FIRST-LINE
:first-line 选择元素的第一行，只适用于块级元素，行内元素不适用。
即使一段文本有多行，也会选中第一行。
CSS:
p:first-line {
background: orange;}
::SELECTION
::selection选择文档中被高亮选中的部分。
注意，基于Gecko的浏览器要求使用前面：::-moz-selection。
注意： 在一条规则中同时使用带前缀和不还前缀的::selection是不行的，要分别写。
CSS:
::-moz-selection {
color: orange;
background: #333;}::selection {
color: orange;
background: #333;}
::PLACEHOLDER (EXPERIMENTAL)
::placeholder伪元素选择表单元素中通过placeholder属性设置的占位文本。
也可以写成::input-placeholder。
注意： 这个伪元素不是标准的，因此将来有可能会变化。
在某些浏览器（IE10及Firefox 18之前）中，::placeholder伪元素的实现类似一个伪类。其他浏览器都将其视为伪元素。因此，除非要兼容IE10或旧版本的Firefox浏览器，因此应该这样写：
HTML:
<input type="email" placeholder="name@domain.com">
CSS:
input::-moz-placeholder {
color:#666;}input::-webkit-input-placeholder {
color:#666;}/* IE 10 only */input:-ms-input-placeholder {
color:#666;}/* Firefox 18 and below */input:-moz-input-placeholder {
color:#666;}
小结
CSS伪类和伪元素相当有用，对不？这些伪类和伪元素提供了丰富的选择便利。
不要光看，自己动手试一试吧。广受支持的伪类和伪元素是很靠谱的。
希望大家看了这篇长文能有所收获。别忘了收藏它！
全部完~
相关链接
网友评论