在选择器系列文章的第三篇中,我们讨论伪选择器 。该选择器不是选择元素,而是元素的某些部分,或仅在某些特定上下文中存在的元素。它们有两种主要类型 : 伪类和伪元素。

伪类(Pseudo-class)

一个 CSS  伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式,例如当鼠标悬停在元素上面时,或者当一个复选框被禁用或被勾选时,又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。

我们不会立马深入讲解每一个伪类(pseudo-class),在学习领域中,详尽无遗地教给你每一件事不是目的。在适当的时候,你会更加详尽的了解一些内容。

一个伪类(Pseudo-class)的例子

现在,让我们来看一个简单的使用例子。首先是一个 HTML 片段:

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

然后,一些 CSS 样式:

/* 这些样式将在任何情况下应用于我们
的链接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */

a:visited {
  color: blue;
}

/* 当光标悬停于链接,键盘激活或锁定
链接时,我们让链接呈现高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

现在,我们可以跟修改了样式的链接愉快地玩耍了!

主动学习:一个条纹状的信息列表

又轮到你了。在这个主动学习环节中,我们希望你为信息列表增加条纹状效果,然后增加合适的伪类使得里面的链接在鼠标经过时显得不同。在这个练习中,你只需要修改最后的三条规则。一些提示:

  1. 你应该已经知道怎样使用伪类实现悬停样式。
  2. 对于条纹状效果,你需要用到一个伪类,如:nth-of-type(),通过给那两个颜色规则添加稍微不同的伪类,使得列表的奇数行和偶数行有着不同的样式效果。来看看你有没有找到实现的方法!

如果你写错了,你可以使用 Reset 按钮进行重置。如果你实在不知道怎么实现,按 Show 按钮可以看到答案。

伪元素

 

伪元素(Pseudo-element)跟伪类很像,但它们又有不同的地方。它们都是关键字,但这次伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分。

它们都拥有特别的行为和有趣的特性,但我们不会在这里对它们都进行深入探究。

一个伪元素(pseudo-element)例子

我们在这里仅展示一个简单的 CSS 例子,就是如何在所有超链接元素后面的增加一个箭头:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

让我们加上 CSS 规则:

/* 所有含有"href"属性并且值以"http"开始的元素,
将会在其内容后增加一个箭头(去表明它是外部链接)
*/

[href^=http]::after {
  content: '⤴';
}

我们可以得到这样的效果:

主动学习:一个很棒棒的段落

下面是主动学习部分,我们有一个很棒棒的段落需要装饰!你需要做的事是给出两个规则集分别指定段落的第一行和第一个单词,可以使用伪元素 ::first-line ::first-letter 得到需要的。元素需要的效果,是段落的第一行使用粗体字,它的第一个单词首字母大写并给它一种老式的感觉。

如果你写错了,你可以使用 Reset 按钮进行重置。如果你实在不知道怎么实现,按 Show 按钮可以看到答案。

下一步

我们将会从选择符和多重选择器(Combinators and multiple selectors)结束我们对 CSS 选择器的学习。

文档标签和贡献者

最后编辑者: codeofjackie,