CSS伪类和伪元素总结_伪元素, 伪类选择器, 伪元素教程

作者：静子日期：2016-06-11 点击：2082

大家好！在早期的网页设计之中，我不得不从试验以及错误之中进行学习总结。那时没有可参考的杂志，也没有像 Codepen 或者其它类似的使用工具。如果有人可以为我指点一下，尤其是CSS方面，都将会是很大的帮助。

现在我的经验越来越多，我想和大家分享一个有关于CSS 伪类以及伪元素的总结。

如果你是一位前端设计者或开发者，你一定对将要讨论的伪元素以及伪类有所了解并且可能使用过它们。然而我还是建议你看看本文所讲的所有条目选项，你可能会有新的收获。

在开始正式讲解之前，让我们先讨论一个问题，关于伪元素和伪类，大家了解“pseudo”的含义么？如果没有相关概念，请参考Dictionary.com网站上的定义:

形容词 - 不是真实存在的但是又好像存在；假装的；假的； - 几乎，接近，或想要成为

这里就不在重复声明 W3C 上有关的定义，伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是: :link , :visited , :hover , :active , :first-child 以及 :nth-child。这里还有很多，接下来我们将要逐一进行介绍。

此外，伪类前面总是加一个冒号(:)。之后跟着伪类的名字或者是括号里面的值，如:nth-child。

关于伪元素，它们更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没有真正的指定伪元素，但是可以使用CSS进行创建。

常见的几种伪元素是: :after , :before 以及 :first-letter。在文章的最后我们将对他们进行详细的说明。

关于伪元素使用单冒号还是双冒号?

在大多数情况下，两者均可。

CSS3中引入双冒号(::)是为了在伪类中，如::hover,:active,区分伪元素，如::before，::after。除了IE8及其以下版本不支持外，所有的浏览器均支持伪元素中双冒号的使用。

一些伪元素，如::backdrop只接受双冒号的使用。

就我个人而言，我使用单冒号以便使我的CSS可以向后兼容一些旧浏览器。当然，在那些指定使用双冒号的伪元素上使用双冒号。

你可以自由的去选择使用，因为不存在对错之分。

然而在写这篇文章时，规范建议使用单冒号，理由如上所述，为了得到更好的向后兼容性:

请注意CSS3中伪元素的书写是使用双冒号，如 a::after{···}，以便于将他们与伪类进行区分。这种情况你可能在CSS中见过。但是CSS3中为了得到更好的向后兼容性，也允许单冒号的使用并且现在我们也建议单冒号的使用。

在这篇文章的头部，支持单双冒号的伪元素的显示为双冒号。当然只支持双冒号的伪元素的显示也是双冒号。

什么时候使用(不使用) CSS 生成内容

通过CSS生成内容是通过content属性结合:before或者:after伪元素实现的。

这里的“内容”可能是纯文本或者是通过操纵CSS来显示图形形状或者装饰元素的一个容器。这里，我将要涉及第一种类型 - 文本。

由于以下几个原因，生成内容不适用于重要副本或者文本:

对于屏幕阅读器是不可读的。
不可以进行选择。
如果生成的内容使用过多的内容进行修饰，屏幕阅读器会将其放大化，从而导致较为糟糕的用户体验。

使用CSS生成内容用于修饰或者一些非重要的文本信息，需要处理好与屏幕阅读器的关系，这样子才可以确保使用辅助技术的人可以拥有最佳的使用效果。当你使用CSS生成内容时，要时刻考虑"渐进增强"地设计理念。

有很多相关文献可参考，Gabriele Romanato曾书写了一篇令人敬畏的文章--如何使用CSS生成内容。

一些正在实验的伪类以及伪元素

正在实验的伪类或者伪元素是指其规范还不稳定或者说还没有定稿。其语法挥着行为可能还会有所改变。

但是我们可以在其前面加上供应商前缀来进行使用。关于这个问题，请查阅这里。这里你可以使用一些自动进行前缀添加的工具，如-prefix-free或者Autoprefixer。

在这篇文章中，在一些伪类或者伪元素旁边你可以会见到"实验性"的标签。

伪类

对伪类进行讲解之前，我们先来讨论一下与伪类息息相关的状态。

状态

当用户执行操作时，一般状态伪元素就会发挥作用。在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;
}

:ACTIVE

:active伪类用于已被“激活”元素的样式修饰，如通过触摸屏的点击。这里也可以通过键盘触发，和:focus伪类相似。

active伪类和:focus伪类十分相似，不同之处在于:active伪类是鼠标被点击与被释放之间发生的事件。

它处于此类伪元素的尾端(hover伪类之后)。

a:active {
    color: rebeccapurple;
}

:FOCUS

:focus伪类用于获取焦点的元素样式的修饰，如触摸设备上的点击或者是通过键盘。这在表单元素之中的应用比较多。。

a:focus {
    color: green;
}

或者是

input:focus {
    background: #eee;
}

Sass中一个用于链接的mixins

如果你使用CSS预处理器，如Sass，那么你会对这里所讲的内容感兴趣。

(如果你不使用CSS预处理器 - 也没有关系 - 你可以直接跳到下节内容 - 结构性伪类)

本着优化我们工作流程的精神，下面是一个Sass mixin，使我们可以创建一组基本链接的样式。

mixin背后的思想是参数中没有默认值。所以我们是以一种友好的方式进行“强迫式”声明四种链接的状态。

:focus伪类和:active伪类一般在一起声明。当然处于个人喜好，你也可以分开声明。

另外mixin可以应用于任何HTML元素，不仅仅是链接。

如下是我们的mixin：

@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;
}

结构性

结构性伪类目标是在文档树或者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-type伪类表示其父容器内最后一个子元素。

下面示例中,最后一个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

这里除了.first-item选择器所代表的li元素外，所有的文本颜色为橙色。

li:not(.first-item) {
    color: orange;
}

这里我们将要进行两个:not伪类的书写。在这个列表中除了.first-item选择器所代表的li元素以及最后一个li元素所表示的文本，所文本颜色均为橙色。

li:not(.first-item):not(:last-of-type) {
    background: yellow;
    color: black;
}

:NTH-CHILD

:nth-child伪类根据在标记中的顺序匹配一个或者多个元素。

这个伪类在CSS中是最灵活、最强健的伪类之一。

所有的:nth伪类都带有一个参数-在括号内书写一个公式。这个公式可能是一个整数，也可能为an+b或者是odd或even关键字。

在an+b公式中:

a是一个数字(成为整数);
n就是我们常说的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

让我们选择第二个子元素。所以只有"Beta"文本为橙色。

ol :nth-child(2) {
    color: orange;
}

现在让我们从第二个子元素进行选择。所以"Beta","Delta","Zeta","Theta"以及"Kappa"文本为橙色。

ol :nth-child(2n) {
    color: orange;
}

让我们选择所有偶数的子元素:

ol :nth-child(even) {
    color: orange;
}

让我们从第六个子元素开始，选择一下其它的子元素。这里"Zeta","Theta"以及"kappa"文本将为橙色。

ol :nth-child(2n+6) {
    color: orange;
}

:NTH-LAST-CHILD

:nth-last-child伪类基本上和:nth-child伪类工作一致，只不过它是从后面开始，而不是前面。

CSS

让我们从后面选择第二个孩子，只有“Iota”变为橙色。

ol :nth-last-child(2) {
    color: orange;
}

让我们从后面第二个开始选择其余孩子，“Iota”，“Eta”，“Epsilon”，“Gamma”以及“Alpha”将会变为橙色。

ol :nth-last-child(2n) {
    color: orange;
}

从后面开始选择偶数的孩子:

ol :nth-last-child(even) {
    color: orange;
}

从后面第六个孩子开始选择其他孩子，“EEpsilon”，“Gamma”以及“Alpha”将会变为橙色。

ol :nth-last-child(2n+6) {
    color: orange;
}

:NTH-OF-TYPE

:nth-of-type伪类基本上和:nth-child伪类工作一致，最大的区别在于其更为具体，我们指定一个元素相对于包含在相同父元素内的元素一样。

在下面的示例中，在所给的容器中所有第二个段落文本都将变为橙色。

HTML

<article>
    <h1>Heading Goes Here</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></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伪类基本工作一致，区别在于它是从列表的后面开始计算，而不是前面。

在下面的示例中，因为我们是从底部开始，所有的第一个段落都将变为橙色。

HTML

</article>
    </h1>Heading Goes Here</article>/h1>
    </p>This text will be orange.</p>
    </a href="#"><img src="images/rwd.png" alt="Mastering RWD"></a>
    </p>Lorem ipsum dolor sit amet.</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有两个孩子，因此其不会受:nth-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只有一个孩子，其文本将变为橙色。

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中的hash。

在下面的示例中，article具有target的ID，当浏览器中的URL以#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:来实现相同的效果。

验证

表单一直是网页设计和开发的祸根。在验证伪类的帮助下，我们可以使表单填写更加顺畅，可以拥有更加愉快的过程。

需要注意，这里列出的大部分伪类在表单元素中都可以正常工作，一些伪类在HTML元素中也可以使用。

让我们看看这些伪类。

:CHECKED

:checked伪类指定单选按钮，复选框以及已经被选择的选项元素。

在下面的示例中，当复选框被选择时，标签就会以高亮显示，增强了用户体验。

:DEFAULT

:default伪类指定一组相似元素中默认的元素。

当你需要在表单中指定一个默认的没有类的按钮时，你可以使用:default伪类。

注意，为了避免带来一些严重的可用性问题，你需要在表单中提供一个“Reset”或者“Clear”按钮。除非有需要，否则不要轻易使用它们。下面两篇文章有相关解释:

“Reset and Cancel Buttons,” Nielsen Norman Group (2000)
“Killing the Cancel Button on Forms for Good,” UX Movement (2010)

:DISABLED

:disabled伪类指定一个表单元素处于不可用状态。处于不可用状态的元素不可以被选择、选中、激活或者获得焦点。

在下面的示例中，名称字段的输入被禁用，它将以50%的透明度显示。

HTML

<input type="text" id="name" disabled>

CSS

:disabled {
    opacity: .5;
}

提示:在标记中使用disabled="disabled不是必需的的。你可以只使用disabled属性实现相同的效果。需要记住在XHTML中必须使用disabled="disabled。

:EMPTY

:empty伪类指定任何一种没有内容的元素。如果一个元素有一个字母。一个另外的HTML元素甚至是一个空格，该元素都将不为空。

这里有一个有关于为不为空的定义:

Empty:在一个元素中没有内容和字符的出现。元素内部HTML注释不算做内容。
Not empty:一个元素内出现字符。甚至一个空格都将视为内容。

在下面的例子中:

第一个容器内有文本，所以有一个橙色的背景。
第二个容器内有一个空格包含内容，同样有一个橙色的背景。
第三个容器无内容为空，不具有橙色背景。
最后一个容器仅仅有一个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;
}

:ENABLED

:enabled伪类指定一个元素可用。默认情况下，所有的表单元素均可用，除非我们在标记中添加disabled属性。

我们可以结合使用:enabled和:disabled提供可视反馈，从而改善用户体验。

在下面的示例中，在不可用之后，名称字段输入变为可用并且透明度变为1并具有1像素的绿色边框。

:enabled {
    opacity: 1;
    border: 1px solid green;
}

提示: 在标记中使用enabled="enabled不是必需的，你也可以使用简写的enabled来实现相同的效果。记住在XHTML中必须使用enabled="enabled.

: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;
}

: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;
}

:INDETERMINATE

:indeterminate伪类指定输入元素没有被选择的元素，如单选按钮或复选框，未选中或页面加载后未选中的元素。

一个例子就是: 当页面加载许多单选按钮并且没有设置默认或者预选择的按钮，或者一个复选框已通过JavaScript确定不确定状态。

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;
}

:VALID

:valid伪类指定一个通过匹配正确的所要求格式的表单元素。

在下面的例子中，email输入区域具有一个已经预先设置好的输入格式。，所以其确认被验证时就会出现一个1像素的绿色边框。

input[type=email]:valid {
    border: 1px solid green;
}

:INVALID

:invalid伪类指定一个不匹配指定样式的表单元素。

在下面的例子中，当email表单输入区的值不匹配预先设置好的格式时就会出现一个橙色的边框:

input[type=email]:invalid {
    background: orange;
}

:OPTIONAL

:optional伪类指定表单中没有被required的输入区域。换句话说就是，只要输入区域没有required属性，它就会被:optional伪类指定。

在下面的例子中，输入区域是可选择的，不具有required属性，所以其文本将变为灰色。

HTML:

<input type="number">

CSS:

:optional {
    color: gray;
}

:READ-ONLY

:read-only伪类指定不能由用户进行编辑的元素。与:disabled伪类十分相似。该属性在标记中的使用将决定我们使用哪一个伪类。

这将会十分有用，如在窗体要显示预填充的内容，不能更改，但是仍需要在提交表单的表单元素中显示。

在下面的例子中，输入元素只有一个只读HTML属性。因此它可以被:read-only伪类指定，所以将显示一个灰色的文本。

HTML:

<input type="text" value="I am read only" readonly>

CSS:

input:read-only {
    color: gray;
}

:READ-WRITE

:read-write伪类指定一个可以用户编辑的元素。一个具有contenteditableHTML属性的元素同样可以被指定。

在某些情况下，此伪类可以结合: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;
}

:REQUIRED

:required伪类指定具有required HTML属性的表单输入元素。

除了依靠传统的星号(*)标签表示此区域为必填写区域，我们也可以通过CSS设置样式进行提示。两者效果均佳。

在下面的示例中，输入区域具有requiredHTML属性。我们可以通过设置一个特殊的样式给用户一个视觉提示表示区域为必填写区域，从而提高用户体验。

HTML:

<input type="email" required>

CSS:

:required {
    color: black;
    font-weight: bold;
}

:SCOPE (EXPERIMENTAL)

当在样式标签内限定HTML属性的作用域时，:scope伪类最有意义。

如果网页上的一节在样式标签内没有scoped属性时，:scope伪类将遍历到整个html元素，基本上是一个样式表的默认范围。

在下面的例子中，HTML块有一个scoped样式，因此第二节元素的文本将呈现斜体。

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>

语言

语言伪类仅和页面中包含的文本有关。和任何媒体，如图片，播放器都无关。

:DIR (EXPERIMENTAL)

:dir伪类指定文档中被指定方向的元素。换句话说就是，为了使:dir伪类工作，我们需要使用dir HTML属性在标记中指定相关元素的方向。

目前有两个方向可供使用: ltr(从左向右)以及rtl(从右向左)。

在写这篇文章时，只有火狐(使用前缀-moz-dir()选择器)支持:dir伪类。在将来这可能很快就会改变，所以下面的示例中国使用了前缀选择器以及无前缀选择器。

注意: 在单一的规则中，结合一个单一的前缀选择器和前缀选择器不起作用。我们需要创建单独两个规则。

在下面的示例中，段落使用阿拉伯语书写(script从右向左)。所以其文本颜色为橙色。

HTML:

<article dir="rtl">
    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>

CSS:

/* prefixed */
article :-moz-dir(rtl) {
    color: orange;
}

/* unprefixed */
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:

/* prefixed */
article :-moz-dir(ltr) {
    color: blue;
}

/* unprefixed */
article :dir(ltr) {
    color: blue;
}

:LANG

:lang伪类匹配一个元素的语言与HTML属性中的lang=""，相应的meta元素以及信息收集到的协议，如HTTP标头结合决定。

lang=""html属性通常用于html标记中，但是如果需要在其他标记中也可以使用。

注意，对于特定的语言常见的做法是使用括号CSS属性添加适当的引号括起来。但是大多数浏览器(包括IE9及以上)的用户代理(UA)都可以自动的添加引号，以防在CSS中没有被声明。

根据你的情况，由于浏览器UA默认添加的引号和通过CSS添加的引号的差异，这可能成功也可能不会成功。

如，浏览器UA添加的German(de)引号如下所示:

„Lorem ipsum dolor sit amet.“

然而，在大多数例子中通过CSS声明的German引号如下所示:

»Lorem ipsum dolor sit amet.«

两者都是正确的。所以你不得不决定你是使用UA添加引号好事通过CSS使用:lang伪类和引号CSS属性自己添加引号标记。

让我们使用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: '»' '«'; }

其它

接下来，让我们探索一些具有其他功能的伪类。

:ROOT

:root伪类指文档中最高级父元素。

几乎在所有情况下，:root伪类都指代HTML文档中的html元素。但是如果在另外一种标记语言，如 SVG 或者 XML中，它也可以指代另外一种元素。

让我们在HTML文档中给最高级父元素 - html元素添加一个指定的背景颜色，

:root {
    background: orange;
}

注意: 我们也可以使用html选择器实现相同的效果。但是，:root作为一个类比一个元素选择器具有更高的识别性(在html中)。

:FULLSCREEN (EXPERIMENTAL)

:fullscreen伪类指定元素在全屏模式下显示。

但是，这不是用户使用F11键使浏览器进入的全屏模式。相反，这是为了和JavaScript Fullscreen API 结合使用的，面向在父容器中执行的图像，视频和游戏。

当一条信息显示在浏览器上方时，就显示告知我们已经进入全屏模式，当按下Escape键时就会回到正常显示页面。如，当我们在YouTube最大化视频时一样。

如果你想使用:fullscreen伪类，需要记住浏览器之间对样式的渲染十分不同。加上，你不得不处理浏览器前缀，不仅仅是CSS同时也包括你的JavaScript。这里我推荐使用Hernan Rajchert的screenfull.js，其处理了大部分的不同。

Fullscreen API超出了本文章所讲述的范围，但是这里有一个工作在 Webkit 和 Blink浏览器中的一个片段。

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 {
    background: orange;
}

伪元素

正如文章开头提到的一样，伪元素就像我们处理正常HTML元素般的虚元素。它们不存在于文档树和DOM之中，意味着我们没有在HTML中指定伪元素，但是却使用CSS创建了它们。

另外，双冒号(::)和单冒号(:)只是CSS 2.1和CSS3伪元素在视觉上的区分，你仍旧可以自由的选择使用它们。

::BEFORE/:BEFORE

:before伪元素和它的兄弟:after，用来给另外一个HTML元素添加内容(文本或者图形)。同样的，添加的内容并不在DOM中真实存在但是可操纵。另外，内容的属性需要在CSS中声明。

需要记住，使用这个伪元素添加的文本不可以被选择。

HTML:

<h1>Ricardo</h1>

CSS:

h1:before {
    content: "Hello "; /* Note the space after the word Hello. */
}

渲染出来类似这样：

Hello Ricardo!

注意:“Hello ”中的空格也同时被添加进去了。

::AFTER/:AFTER

:after伪元素用来向另一个HTML元素中添加内容(同样的也是文本或者图形)。被添加的内容不存在于DOM中，但是可操纵。为了更好地工作，内容属性需要在CSS中声明。

注意，使用这个伪元素添加的内容不可以被选择。

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;
}

::FIRST-LETTER/:FIRST-LETTER

:first-letter 伪元素用来选择文本的第一个字母。

如果第一行文本包含一个元素，如图片，播放器或者表格，这时第一个字母不会被影响仍旧可以被选择。

这在段落中是一个很好的应用，如：在不需要使用图片或者外部设置时，可以提高段落的吸引力。

提示:使用:before伪元素生成的内容文本，即使不存在于DOM中，其文本的第一个字母可以被指定。

CSS:

h1:first-letter  {
    font-size: 5em;
}

::FIRST-LINE/:FIRST-LINE

:first-line伪元素指定一个元素的第一行。它旨在块级元素中起作用，在行内元素不起作用。

当在段落中使用时，如:只是给段落的第一行文本改变样式，即使文本被包裹。

CSS:

p:first-line {
    background: orange;
}

::SELECTION

::selection伪元素用于文档中样式被突出显示的部分。

另外，基于Gecko的浏览器需要添加版本前缀: ::-moz-selection.

注意: 仅仅在一个规则中使用前缀或者不使用前缀是不起作用的。我们需要声明两个单独的规则。

CSS:

::-moz-selection {
    color: orange;
    background: #333;
}

::selection  {
    color: orange;
    background: #333;
}

::PLACEHOLDER (EXPERIMENTAL)

::placeholder伪元素指定通过HTML属性设置的表单元素中的占位符文本。

它也可以被写作::input-placeholder，这种是CSS中实际使用的语法。

注意: 这个伪元素还不是标准的一部分，它的实现可能还会有改变，所以使用时需要注意。

在一些浏览器中(IE 10 和火狐的版本18以上的)，::placeholder伪元素的实现如一个伪类。但是其余浏览器的实现仍旧是一个伪元素。所以除非你不得不支持火狐的旧版本或者IE10 以下的版本，你的书写需要向如下所示般:

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中的伪类和伪元素有许多，是不是?可以很轻松的感觉到，它为我们提供了许多的可能性。但是仅仅是针对网页设计师和开发人与而言。

这里，大家需要自己动手去实践，已经实现的伪类和伪元素的使用会持续很久很久。

我希望你可以喜欢这篇可参考文章，就如我书写时的初衷般。

本文根据@Ricardo Zea的《An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/。

静子

在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶

如需转载，烦请注明出处：http://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html

上一篇: 关于BEM中常见的十个问题以及如何避免 | 下一篇: JavaScript算法练习：重复字符串

w3cplus

你在这里

CSS伪类和伪元素总结

关于伪元素使用单冒号还是双冒号?

什么时候使用(不使用) CSS 生成内容

一些正在实验的伪类以及伪元素

伪类

状态

:LINK

:VISITED

:Hover

:ACTIVE

:FOCUS

Sass中一个用于链接的mixins

结构性

:FIRST-CHILD

FIRST-OF-TYPE

:LAST-CHILD

:LAST-OF-TYPE

:NOT

:NTH-CHILD

:NTH-LAST-CHILD

:NTH-OF-TYPE

:NTH-LAST-OF-TYPE

ONLY-CHILD

ONLY-OF-TYPE

:TARGET

验证

:CHECKED

:DEFAULT

:DISABLED

:EMPTY

:ENABLED

:IN-RANGE

:OUT-OF-RANGE

:INDETERMINATE

:VALID

:INVALID

:OPTIONAL

:READ-ONLY

:READ-WRITE

:REQUIRED

:SCOPE (EXPERIMENTAL)

语言

:DIR (EXPERIMENTAL)

:LANG

其它

:ROOT

:FULLSCREEN (EXPERIMENTAL)

伪元素

::BEFORE/:BEFORE

::AFTER/:AFTER

::BACKDROP (EXPERIMENTAL)

::FIRST-LETTER/:FIRST-LETTER

::FIRST-LINE/:FIRST-LINE

::SELECTION

::PLACEHOLDER (EXPERIMENTAL)

总结

静子

GitHub

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品