本文转载自：众成翻译
译者：为之漫笔
链接：http://www.zcfy.cc/article/239
原文：https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#?
刚开始从事Web设计时，我犯了很多错误，也因此获得了进步。那时候没有Smashing Magazine、Can I Use、_ CodePen_，也没有其他我们现在常见的工具。只要有人能告诉一个设计思路，特别是CSS前沿方向的，那就谢天谢地了。
今天我的经验已经很丰富了，所以想本着友好、随意、探讨的原则，跟大分享一下CSS中的伪类和伪元素。
如果你已经是有经验的Web设计者和开发者了，那么一定对本文要讨论的伪类和伪元素有所了解。不过，还是建议你先看看本文后面完整的列表，看有没有一两个你还不知道的？
在真正开始之前，因为我们想讲伪类和伪元素嘛，所以先问个基本的问题：你知道这里的“伪”是什么意思吗？不确定的话，可以参考Dictionary.com的定义：
形容词
1. 不是真实的但有其外观；伪装的；假的或欺骗的；骗人的。
2. 差不多，很接近，或尽可能一样。
不用管W3C是怎么定义的，反正伪类就是某个元素的一种虚拟状态，或者说一种特有的性质，这种状态或性可以通过CSS捕捉到。常见的伪类有：:link、:visited、:hover、:active、:first-child和:nth-child。当然这只是一少部分，一会儿我们都会介绍。
伪类是一个冒号（:）后跟伪类的名字构成的，有时候名字后面还会有一个放在括号里的值。:nth-child是第几个？
好了，再说伪元素。伪元素是一种虚拟的元素，CSS把它当成普通HTML元素看待。之所以叫伪元素，就因为它们在文档树或DOM中并不实际存在。换句话说，我们不会在HTML中包含伪元素，只会通过CSS来创建伪元素。
以下是几个常见的伪元素：:after、:before和:first-letter。伪元素会在本文后面介绍。
伪元素是一个冒号还是两个冒号？
简单回答：多数情况下，都行。
两个冒号（::）是CSS3为了区分::before、::after这样的伪元素和:hover、:active等伪类才引入的。除了IE8及以下版本，所有浏览器都支持两个冒号的伪元素表示法。
不过，有些伪元素只能使用两个冒号，像::backdrop。
我个人使用一个冒号，为了跟以前的浏览器兼容。当然，不用两个冒号不行的时候，还是要用两个冒号。
这里没有对错，完全看你个人喜好。
不过，我在写这篇文章时查了一下，规范建议使用单冒号表示法，原因也是向后兼容：
请注意CSS3中表示伪元素使用双冒号，比如
a::after { … }，这是为了与伪类区分开。伪类应该是在CSS中经常出现的。不过，CSS3也允许单冒号的伪元素，目的是向后兼容。我们也建议暂时使用单冒号。
如果伪元素同时支持单、双冒号的形式，本文标题会给出两种形式。如果只支持双冒号，那就只有一种形式。
什么时候使用（不使用）生成的内容
通过CSS生成内容需要用到CSS属性content和伪元素:before或:after。
其中的“内容”（content）可是纯文本，也可以是一个容器，通过CSS操作来显示某种图形或者装饰性元素。本文只介绍第一种内容，即文本。
重要的内容可不要使用生成的内容，原因如下：
屏幕阅读器读不到它
无法选中
如果为了装饰而在生成内容中使用了多余的内容，那么支持CSS生成内容的屏幕阅读器会大声地把它读出来，导致用户体验更差
CSS生成的内容只适用于装饰性、不重要的内容，但也要确保屏幕阅读器能够适当处理它，让使用这些辅助技术的用户不至于分心。这里适用“渐进增强”原则。
在Smashing Magazine上，Gabriele Romanato为此写过一篇非常棒的文章。
实验性伪类和伪元素
实验性的伪类和伪元素，指的是那些不稳定或没最终定案的伪类和伪元素。它们的语法和行为还可能有变。
不过，加上厂商前缀就可以使用这些实验性的伪类和伪元素。可以参考Can I Use，以及一些自动加前缀的工具，比如-prefix-free或Autoprefixer就是必备的。
本文会在实验性的伪类和伪元素的名字旁边加上“experimental”标签。
全部伪类和伪元素（按字母顺序）
:active::after/:after::backdrop (experimental)::before/:before:checked:default:dir (experimental):disabled:empty:enabled:first-child::first-letter/:first-letter::first-line/:first-line:first-of-type:focus:fullscreen (experimental):hover:in-range:indeterminate:invalid:lang:last-child:last-of-type:link:not:nth-child:nth-last-child:nth-last-of-type:nth-of-type:only-child:only-of-type:optional:out-of-range::placeholder (experimental):read-only:read-write:required:root::selection:scope (experimental):target:valid:visitedBonus content: A Sass mixin for links
好啦，诸位，好戏开场了！
伪类
首先，我们讨论伪类，从状态伪类开始。
状态伪类
状态伪类通常出现在用户执行某个操作的情况下。在CSS里，“操作”也可以是“无操作”，比如尚未点过的链接。
下面就有请它们一个一个地上场。
:LINK
:link伪类表示链接的正常状态，选择那些尚未被点过的链接。建议在其他链接相关的伪类之前声明:link，它们的顺序为：:link、:visited、:hover、:active。
a:link { color: orange; }当然，这个伪类也可以省略：
a { color: orange; }:VISITED
:visited伪类选择点过的链接，应该声明在第二位（在:link之后）。
a:visited { color: blue; }:HOVER
:hover伪类在用户指针悬停时生效。而且它不只可以用于链接。
它应该在第三位（在:visited之后）。
a:hover { color: orange; }看示例：http://codepen.io/ricardozea/pen/vGEzJK
:ACTIVE
:active伪类选择被鼠标指针或触摸操作“激活的” 元素，也可以通过键盘来激活，就像:focus伪类一样。
与:focus类似，但区别在于:active只发生在鼠标被按下到被释放的这段时间里。
它应该在第四位（在hover后面）。
a:active { color: rebeccapurple; }:FOCUS
:focus用于选择已经通过指针设备、触摸或键盘获得焦点的元素，在表单里使用得非常多。
a:focus { color: green; }或者：
input:focus { background: #eee; }扩展内容：Sass中针对链接的混入
如果你用过CSS预处理器，那应该对这一部分感兴趣。
（如果你不熟悉CSS预处理器，没问题，跳过这一节，直接看下一节吧。）
为了简化CSS编码工作，这里介绍一下创建一组基本的链接样式的Sass混入（mixin）。
这里的混入没有默认参数，因此我们必须以一种友好的方式，声明链接的全部4种状态。
:focus和:active伪类的声明通常在一块，当然也可以给它们分开。
注意这个混入不仅仅适用于链接，而是适用于任何 HTML元素。
这就是我们定义的混入：
@mixin links ($link, $visited, $hover, $active) { & { color: $link; &:visited { color: $visited; } &:hover { color: $hover; } &:active, &:focus { color: $active; } } }使用方法：
a { @include links(orange, blue, yellow, teal); }编译结果：
a { color: orange; } a:visited { color: blue; } a:hover { color: yellow; } a:active, a:focus { color: teal; }看示例：http://codepen.io/ricardozea/pen/wMyZQe
结构化伪类
结构化伪类选择通过其他选择符无法选择的文档树或DOM中的其他信息。
:FIRST-CHILD
:first-child伪类选择父元素的第一个子元素。
在下面的例子中，只有第一个li元素的文本是橙色的。
HTML:
<ul> <li>This text will be orange.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
CSS:
li:first-child { color: orange; }:FIRST-OF-TYPE
:first-of-type伪类选择父元素容器内任意类型子元素的第一个元素。
在下面的例子中，第一个li元素和第一个span元素的文本才是橙色的。
HTML:
<ul> <li>This text will be orange.</li> <li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li> <li>Lorem ipsum dolor sit amet.</li> </ul>
CSS:
ul :first-of-type { color: orange; }:LAST-CHILD
:last-child伪类选择父元素的最后一个子元素。
在下面的例子中，只有最后一个li元素的文本是橙色的。
HTML:
<ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>This text will be orange.</li> </ul>
CSS:
li:last-child { color: orange; }:LAST-OF-TYPE
:last-of-type伪类选择父元素容器内任意类型子元素的最后一个元素。
在下面的例子中，最后一个li元素和最后一个span元素的文本才是橙色的。
HTML:
<ul> <li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span> <span>This text will be orange.</span></li> <li>Lorem ipsum dolor sit amet.</li> <li>This text will be orange.</li> </ul>
CSS:
ul :last-of-type { color: orange; }:NOT
:not伪类也叫取反伪类，它通过括号接受一个参数，一个“选择符”。实际上，这个参数也可以是另一个伪类。
这个伪类可以连缀使用，但不能包含别的:not选择符。
在下面的例子中，:not伪类选择与参数不匹配的元素。
HTML:
<ul> <li class="first-item">Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
CSS:
应用下面的CSS，除了类为.first-item的li之外的li元素的文本都是橙色的：
li:not(.first-item) { color: orange; }下面看一看“连缀”两个:not伪类。应用下面的CSS规则，除了类为.first-item的li和最后一个li，其他li都会有黄色背景和黑色文本：
li:not(.first-item):not(:last-of-type) { background: yellow; color: black; }看示例：http://codepen.io/ricardozea/pen/dGmqbg
:NTH-CHILD
:nth-child伪类根据元素在标记中的次序选择相应的元素。
这个伪类在CSS中是用途最广、支持也最广的。
所有:nth伪类都接受一个参数，这个参数是一个公式。公式可以是一个整数，或者关键字odd、even，或者形如an+b的结构。
对于an+b:
a是一个数值（整数）n就是n+是运算符，可以是加号+或减号-b也是一个整数，但只有使用了运算符的时候才会用到
以希腊字母的英文列表为例，以下是HTML标记结构：
<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol>
CSS:
选择第2个子元素，结果Beta会变成橙色:
ol :nth-child(2) { color: orange; }从第2个子元素起，隔一个选一个，结果Beta、Delta、Zeta、Theta和Kappa会变成橙色:
ol :nth-child(2n) { color: orange; }选择所有偶数个子元素：
ol :nth-child(even) { color: orange; }从第6个子元素起，隔一个选一个，结果Zeta、Theta和Kappa会变成橙色：
ol :nth-child(2n+6) { color: orange; }看示例：http://codepen.io/ricardozea/pen/adYaER
:NTH-LAST-CHILD
除了是从后往前选择元素，:nth-last-child跟:nth-child完全一样。
CSS:
选择倒数第2个子元素，只有Iota是橙色：
ol :nth-last-child(2) { color: orange; }从倒数第2个子元素开始，隔一个选一个，结果Iota、Eta、Epsilon、Gamma和Alpha会变成橙色：
ol :nth-last-child(2n) { color: orange; }从后往前，选择所有偶数个子元素：
ol :nth-last-child(even) { color: orange; }从倒数第6个元素开始，隔一个选一个，因此Epsilon、Gamma和Alpha会变成橙色：
ol :nth-last-child(2n+6) { color: orange; }:NTH-OF-TYPE
:nth-of-type伪类与:nth-child类似，主要区别是它更具体了，只针对特定类型的元素。
在下面的例子中，所有容器内的第2个p元素将为橙色。
HTML:
<article> <h1>Heading Goes Here</h1> <p>Lorem ipsum dolor sit amet.</p> <a href=""></a> <p>This text will be orange.</p> </article>
CSS:
p:nth-of-type(2) { color: orange; }:NTH-LAST-OF-TYPE
:nth-last-of-type伪类是从后往前数，其余跟:nth-of-type一样。
对于下面的例子，因为是从末尾开始，所以第1个段落会变成橙色。
HTML:
<article> <h1>Heading Goes Here</h1> <p>Lorem ipsum dolor sit amet.</p> <a href=""></a> <p>This text will be orange.</p> </article>
CSS:
p:nth-last-of-type(2) { color: orange; }相关资源
建议大家在使用:nth伪类前，一定要参考下面这两篇不错的文章：
“CSS3 Structural Pseudo-Class Selector Tester” Lea Verou
“:nth Tester” CSS-Tricks
:ONLY-CHILD
:only-child选择父元素中唯一的子元素。
在下面的例子中，第一个ul只有一个子元素，因此该子元素将变成橙色。第二个ul有多个子元素，因此其子元素不会受:only-child伪类影响。
HTML:
<ul> <li>This text will be orange.</li> </ul> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
CSS:
ul :only-child { color: orange; }:ONLY-OF-TYPE
:only-of-type伪类选择同级中类型唯一的元素，与:only-child类似，但针对特定类型的元素，让选择符有了更强的意义。
在下面的例子中，第一个ul只有一个li元素，因此其文本将为橙色。
HTML:
<ul> <li>This text will be orange.</li> </ul> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
CSS:
li:only-of-type { color: orange; }:TARGET
:target伪类通过元素的ID及URL中的锚名称选择元素。
在下面的例子中，当浏览器中的URL以#target结尾时，ID为target的文章将被选中。
URL:
http://awesomebook.com/#target
HTML:
<article id="target"> <h1><code>:target</code> pseudo-class</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p> </article>
CSS:
:target { background: yellow; }提示： background:是background-color:的简写形式，用于指定颜色时效果一样。
验证伪类
表单验证一直是Web设计与开始中最不好搞的。有了验证伪类，可以让用户填写表单的过程更平顺。
有一点要注意，虽然本节介绍的伪类都用于表单元素，但其中有的伪类也可以用于其他HTML元素。
下面就来看看这些伪类吧！
:CHECKED
:checked伪类选择被勾选或选中的单选按钮、多选按钮及列表选项。
在下面的例子中，复选框被勾选后，标签会突出显示，增加了用户体验。
看示例：http://codepen.io/ricardozea/pen/wMYExY
:DEFAULT
:default伪类从表单中一组类似元素里选择默认的元素（即“提交”按钮。——译者注）。
如果要选择表单中没有类的默认按钮，可以使用:default。
注意，在表单中使用Reset或Clear按钮会招致严重的可用性问题，所以除非绝对必要再用。参考下面两篇文章：
“Reset and Cancel Buttons,” Nielsen Norman Group (2000)
“Killing the Cancel Button on Forms for Good,” UX Movement (2010)
看示例：http://codepen.io/ricardozea/pen/WrzJKO
:DISABLED
:disabled伪类选择禁用状态的表单元素。处于禁用状态的元素，不能被选中、勾选，不能获得焦点。
在下面的例子中，name输入框处于禁用状态，因此会半透明。
HTML:
<input type="text" id="name" disabled>
CSS:
:disabled { opacity: .5; }提示： 标记中是非要使用disabled="disabled"，只写一个disabled属性就行了。在XHTML中，disabled="disabled"这种写法才是必须的。
看示例：http://codepen.io/ricardozea/pen/NxOLZm
:EMPTY
:empty伪类选择其中不包含任何内容的空元素。只要包含一个字母、其他HTML元素，甚至一个空格，都不算空。
关于空或非空，以下是定义：
空
元素中没有内容或字符。元素中包含HTML注释不算有内容。非空
出现在元素中的字符。空格也算。
在下面的例子中，
第一个元素中包含文本，因此背景不会变成橙色
第二个元素包含一个空格，空格也是内容，因此也不会有橙色背景
第三个元素中什么也没有（空的），因此背景为橙色
最后一个元素中只有一个HTML注释（也是空的），因此也有橙色背景。
HTML:
<div>This box is orange</div> <div> </div> <div></div> <div><!-- This comment is not considered content --></div>
CSS:
div { background: orange; height: 30px; width: 200px; } div:empty { background: yellow; }看示例：http://codepen.io/ricardozea/pen/rxqqaM
:ENABLED
:enabled伪类选择启用的元素。所有表单元素默认都是启用的，除非在标记中添加了disabled属性。
通过:enabled和:disabled可以提供视觉上的反馈，改善用户体验。
在下面的例子中，禁用后又被启用的name输入框的不透明度将变为1，同时会有一个1像素的边框：
:enabled { opacity: 1; border: 1px solid green; }提示： 标记中是非要使用enabled="enabled"，只写一个enabled属性就行了。在XHTML中，enabled="enabled"这种写法才是必须的。
看示例：http://codepen.io/ricardozea/pen/zqYQxq
:IN-RANGE
:in-range伪类选择有范围且值在指定范围内的元素。
在下面的例子中，输入元素支持输入5~10。输入值在这个范围内，会触发绿色边框。
HTML:
<input type="number" min="5" max="10">
CSS:
input[type=number] { border: 5px solid orange; } input[type=number]:in-range { border: 5px solid green; }看示例：http://codepen.io/ricardozea/pen/XXOKwq
:OUT-OF-RANGE
:out-of-range伪类选择有范围且值超出指定范围的元素。
在下面的例子中，输入元素支持输入1~12。输入值超出这个范围内，会触发橙色边框。
HTML:
<input id="months" name="months" type="number" min="1" max="12">`
CSS:
input[type=number]:out-of-range { border: 1px solid orange; }看示例：http://codepen.io/ricardozea/pen/XXOKwq
:INDETERMINATE
:indeterminate伪类选择单选按钮或复选框在页面加载时没有被勾选的。
比如，页面加载后，一组单选按钮中没有默认或预先勾选的，或者一个复选框已经通过JavaScript设置为indeterminate状态。
HTML:
<ul> <li> <input type="radio" name="list" id="option1"> <label for="option1">Option 1</label> </li> <li> <input type="radio" name="list" id="option2"> <label for="option2">Option 2</label> </li> <li> <input type="radio" name="list" id="option3"> <label for="option3">Option 3</label> </li> </ul>
CSS:
:indeterminate + label { background: orange; }看示例：http://codepen.io/ricardozea/pen/adXpQK
:VALID
:valid伪类选择输入格式符合要求的表单元素。
在下面的例子中，email输入框中的电子邮箱格式是正确的，因此这个输入框会被认为有效，将出现1像素的绿色边框：
input[type=email]:valid { border: 1px solid green; }看示例：http://codepen.io/ricardozea/pen/bEzqVg
:INVALID
:invalid伪类选择输入格式不符合要求的表单元素。
在下面的例子中，email输入框中的电子邮箱格式不正确，因此这个输入框会被认为无效，将出现橙色边框：
input[type=email]:invalid { background: orange; }看示例：http://codepen.io/ricardozea/pen/bEzqVg
:OPTIONAL
:optional伪类选择表单中非必填的输入字段。换句话说，只要输入字段中没有required属性，就会被:optional伪类选中。
在下面的例子中，这个数值字段是可以选填的，因此其中的文本将为灰色。
HTML:
<input type="number">
CSS:
:optional { color: gray; }:READ-ONLY
:read-only伪类选择用户不能编辑的元素，与:disabled伪类相似，标记中使用的属性决定了使用哪个伪类。
不能编辑的元素可以用来显示预先填好、不允许修改，但又需要连同表单一起提交的信息。
在下面的例子中，文本框有一个readonly属性，因此会被:read-only伪类选中，文本将为灰色。
HTML:
<input type="text" value="I am read only" readonly>
CSS:
input:read-only { color: gray; }看示例：http://codepen.io/ricardozea/pen/Nxopbj
:READ-WRITE
:read-write伪类选择用户可以编辑的元素，适用于有contenteditable属性的HTML元素。
有时候，可以与:focus伪类一块使用以增强用户体验。
在下面的例子中，点击div元素就可以编辑其中的内容，为此可以应用特殊的样式，让用户知道自己可以编辑其中的内容。
HTML:
<div class="editable" contenteditable> <h1>Click on this text to edit it</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p> </div>
CSS:
:read-write:focus { padding: 5px; border: 1px dotted black; }看示例：http://codepen.io/ricardozea/pen/LGqWxK
:REQUIRED
:required伪类选择有required属性的表单元素。
除了通过标签中的星号（*）提示必填，也可以通过这个伪类为输入字段应用样式。这样就万无一失了。
在下面的例子中，输入框有required属性，通过这个伪类为它应用特殊样式，可以提醒用户它是必填项。
HTML:
<input type="email" required>
CSS:
:required { color: black; font-weight: bold; }看示例：http://codepen.io/ricardozea/pen/KVJWmZ
:SCOPE (EXPERIMENTAL)
:scope伪类适用于style标签中有scoped属性的情形。
如果页面中某一部分的style标签里没有scoped属性，那么:scope伪类会一直向上查找，直到html元素，即当前样式表的默认作用范围。
在下面的例子中，第二个section中有一个scoped样式表，因此这个section中的文本会变成斜体。
HTML and CSS:
<article> <section> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet.</p> </section> <section> **<style scoped> :scope { font-style: italic; } </style>** <h1>This text will be italicized</h1> <p>This text will be italicized.</p> </section> </article>看示例：http://codepen.io/ricardozea/pen/ZQobzz
语言伪类
语言伪类与页面中包含的文本相关，与图片、视频等媒体无关。
:DIR (EXPERIMENTAL)
:dir伪类选择文档中指定了语言方向的元素。换句话说，为了使用:dir伪类，需要在标记中为相关元素指定dir属性。
语言方向目前有两种：ltr（从左到右）和rtl（从右往左）。
写这篇文章时，支持:dir伪类的只有Firefox（-moz-dir()），下面的例子同时使用带前缀和不带前缀的:dir选择符。
注意： 要用带前缀和不带前缀的选择符分别创建规则，两种选择符共享一条规则是不行的。
在下面的例子中，段落中的文字是阿拉伯文（是从右往左书写的），因此其颜色是橙色。
HTML:
<article dir="rtl"> <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p> </article>
CSS:
/* 带前缀 */ article :-moz-dir(rtl) { color: orange; } /* 不带前缀 */ article :dir(rtl) { color: orange; }下面段落中的文字是英文（从左到右），颜色为蓝色。
HTML:
<article dir="ltr"> <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p> </article>
CSS:
/* 带前缀 */ article :-moz-dir(ltr) { color: blue; } /* 不带前缀 */ article :dir(ltr) { color: blue; }看示例：http://codepen.io/ricardozea/pen/adrxJy
:LANG
:lang伪类选择的元素通过lang=""属性、相应的meta元素以及HTTP首部的协议信息来确定。
lang=""属性常用于html标签，其实也可以用于其他标签。
插一句，这里通常的做法是使用CSS的quotes 属性来标记特定的语言。不过，多数浏览器（包括IE9及更高版本）会在CSS中没有声明的情况下自动添加适当的引用标记。
不过，自动添加的引用标记也可能不合适。因为浏览器自动添加的与CSS添加的还不太一样。
比如浏览器为德语（de）添加的引用标记如下：
„Lorem ipsum dolor sit amet.“
但通过CSS为德语添加的引用标签则通常如下：
»Lorem ipsum dolor sit amet.«
这两种都对。因此，使用浏览器自动添加的引用标记，还是自己通过CSS的:lang伪类及quotes属性添加，都看你的需要。
下面看看怎么通过CSS来添加引用标记。
HTML:
<article lang="en"> <q>Lorem ipsum dolor sit amet.</q> </article> <article lang="fr"> <q>Lorem ipsum dolor sit amet.</q> </article> <article lang="de"> <q>Lorem ipsum dolor sit amet.</q> </article>
CSS:
:lang(en) q { quotes: '“' '”'; } :lang(fr) q { quotes: '«' '»'; } :lang(de) q { quotes: '»' '«'; }看示例：http://codepen.io/ricardozea/pen/gPJyvJ
其他伪类
下面再看看拥有其他功能的伪类。
:ROOT
:root伪类选择文档中最高层次的父元素。
在HTML中，:root伪类选择的就是html元素。但在SVG或XML等标记语言中，它可能选择不同的元素。
以下规则为HTML文档中最高层次的父元素html添加背景颜色：
:root { background: orange; }注意： 使用html也可以设置相同的样式，但:root是一个类，拥有比元素选择符（即html）更高的特指度。
:FULLSCREEN (EXPERIMENTAL)
:fullscreen伪类选择在全屏模式下显示的元素。
不过，这不适用于用户按F11进入的全屏模式，只适用于通过JavaScript Fullscreen API切换进入的全屏模式，通常由父容器中的图片、视频或游戏来调用。
怎么知道已经进入全屏模式呢？一般浏览器会在窗口顶部提示你，并告诉你按Escape键可以退出全屏模式。
使用:fullscreen伪类前必须知道，浏览器应用样式的方式差别很大。而且，不仅要在CSS中使用前缀，JavaScript中也一样。推荐使用Hernan Rajchert的screenfull.js，它帮我们填了不少浏览器的“坑”。
本文不会讨论全屏API，只给出一个在WebKit和Blink浏览器中可用的例子。
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1> <button ="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>CSS:
h1:fullscreen { background: orange; }看示例：http://codepen.io/ricardozea/pen/ZQNZqy
伪元素
如前所述，伪元素类似一种虚拟元素，可以将其视为普通的HTML元素。但伪元素并不存在于文档树或DOM中，因此不能在HTML中输入，只能通过CSS创建。
同样，双冒号(::)与单冒号(:)也只是CSS3与CSS2.1的不同。
::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 ="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伪类和伪元素相当有用，对不？这些伪类和伪元素提供了丰富的选择便利。
不要光看，自己动手试一试吧。广受支持的伪类和伪元素是很靠谱的。
希望大家看了这篇长文能有所收获。别忘了收藏它！
作者：极乐君
链接：https://www.jianshu.com/p/9086114e07d4
共同学习，写下你的评论
评论加载中...
作者其他优质文章
