伪类

CSS 播客 - 015：伪类

假设您有一个电子邮件注册表单，并希望电子邮件表单字段在包含无效电子邮件地址时具有红色边框。该怎么做呢？ 您可以使用 :invalid CSS 伪类，它是浏览器提供的诸多伪类之一。

借助伪类，您可以根据状态变化和外部因素应用样式。这意味着，您的设计可以响应用户输入，例如电子邮件地址无效。选择器模块介绍了这些内容，本单元将详细介绍这些内容。

伪元素与伪元素（您可以在上一个单元中详细了解）不同，伪类与元素可能所处的特定状态不同，它不会一般地为该元素的各个部分设置样式。

互动状态

以下伪类因用户与网页之间的互动而适用。

:hover

浏览器支持

  • 1
  • 12
  • 1
  • 2

来源

如果用户有鼠标或触控板等指控设备，并且他们将其放在某个元素上，您可以使用 :hover 连接到该状态以应用样式。这样可以有效提示某个元素可与之互动。

:active

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

如果在释放点击之前用户正与某个元素互动（例如点击）时，就会触发此状态。如果使用鼠标等指控设备，则此状态是点击开始且尚未释放。

:focus、:focus-within 和 :focus-visible

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

如果某个元素可以获得焦点（例如 <button>），您可以使用 :focus 伪类来响应该状态。

如果元素的子元素获得焦点，您还可以使用 :focus-within 做出回应。

可聚焦的元素（例如按钮）在获得焦点时（即使被点击后，也会显示聚焦环）。在这种情况下，开发者将应用以下 CSS：

button:focus {
    outline: none;
}

此 CSS 会在元素获得焦点时移除默认的浏览器焦点环，这会给使用键盘浏览网页的用户带来无障碍功能问题。如果没有焦点样式，他们无法在使用 Tab 键时跟踪当前焦点所在的位置。借助 :focus-visible，您可以在元素通过键盘获得焦点时显示焦点样式，同时还可使用 outline: none 规则防止指针设备与之交互。

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

浏览器支持

  • 1
  • 12
  • 1
  • 1.3

来源

:target 伪类用于选择 id 与网址片段匹配的元素。假设您有以下 HTML：

<article id="content">
    …
</article>

当网址包含 #content 时，您可以向该元素附加样式。

#content:target {
    background: yellow;
}

这对于通过跳过链接突出显示可能已明确链接到的区域（例如网站上的主要内容）非常有用。

历史州/省/自治区/直辖市

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

:link 伪类可应用于 href 值尚未被访问的任何 <a> 元素。

:visited

您可以使用 :visited 伪类设置用户访问的链接的样式。这与 :link 相反，但出于安全原因，可使用的 CSS 属性较少。 您只能设置 color、background-color、border-color、outline-color 的样式以及 SVG fill 和 stroke 的颜色。

顺序很重要

如果您定义了 :visited 样式，它可被特异性至少相同的链接伪类替换。 因此，建议您使用 LVHA 规则按特定顺序为包含伪类的链接设置样式：:link、:visited、:hover、:active。

a:link {}
a:visited {}
a:hover {}
a:active {}

表单状态

以下伪类可以选择表单元素处于与表单元素互动期间可能处于的各种状态。

:disabled和:enabled

浏览器支持

  • 1
  • 12
  • 1
  • 3.1

来源

如果浏览器停用了某个表单元素（例如 <button>），您可以使用 :disabled 伪类连接到该状态。:enabled 伪类适用于相反状态，尽管表单元素默认情况下也是 :enabled，因此您可能无法找到此伪类。

:checked和:indeterminate

浏览器支持

  • 1
  • 12
  • 1
  • 3.1

来源

当辅助表单元素（如复选框或单选按钮）处于选中状态时，可以使用 :checked 伪类。

:checked 状态是二进制（true 或 false）状态，但当复选框既未勾选也未取消选中时，它就会处于中间状态。这称为 :indeterminate 状态。

例如，如果您有一个“全选”控件，它可以勾选某个组中的所有复选框。 如果用户随后取消选中其中某个复选框，根复选框将不再表示选中的“全部”，因此应将其设置为不确定状态。

<progress> 元素还具有可以设置样式的不确定状态。一个常见的用例是赋予其条纹外观，表明不知道还需要多少。

:placeholder-shown

浏览器支持

  • 47
  • 79
  • 51
  • 9

来源

如果表单字段具有 placeholder 属性但没有值，则 :placeholder-shown 伪类可用于将样式附加到该状态。一旦字段中有内容，无论其是否具有 placeholder，此状态将不再适用。

验证状态

浏览器支持

  • 10
  • 12
  • 4
  • 5

来源

您可以使用 :valid、:invalid 和 :in-range 等伪类响应 HTML 表单验证。:valid 和 :invalid 伪类对于以下上下文非常有用：电子邮件字段需要匹配 pattern 才能成为有效字段。此有效值状态可以显示给用户，帮助他们了解可以安全地移动到下一个字段。

如果输入具有 min 和 max（例如数字输入），并且其值在这些边界内，则可以使用 :in-range 伪类。

对于 HTML 表单，您可以使用 required 属性确定某个字段是否为必需字段。:required 伪类将可用于必填字段。您可以使用 :optional 伪类来选择非必填字段。

按索引、顺序和出现次数选择元素

有一组伪类，用于根据项在文档中的位置选择项。

:first-child和:last-child

浏览器支持

  • 4
  • 12
  • 3
  • 3.1

来源

如果要查找第一项或最后一项，您可以使用 :first-child 和 :last-child。这些伪类将返回一组同级元素中的第一个或最后一个元素。

:only-child

浏览器支持

  • 2
  • 12
  • 1.5
  • 3.1

来源

您还可以使用 :only-child 伪类选择没有同级的元素。

:first-of-type和:last-of-type

浏览器支持

  • 1
  • 12
  • 3.5
  • 3.1

来源

您可以选择 :first-of-type 和 :last-of-type，它们首先看起来与 :first-child 和 :last-child 执行相同的操作，但请考虑以下 HTML：

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

以及此 CSS：

.my-parent div:first-child {
    color: red;
}

所有元素都不会显示为红色，因为第一个子级是段落而不是 div。:first-of-type 伪类在此上下文中非常有用。

.my-parent div:first-of-type {
    color: red;
}

尽管第一个 <div> 是第二个子级，但它仍然是 .my-parent 元素中的第一个类型，因此根据此规则，它将被显示为红色。

:nth-child和:nth-of-type

浏览器支持

  • 1
  • 12
  • 3.5
  • 3.1

来源

您不限于第一个和最后一个子元素和类型。:nth-child 和 :nth-of-type 伪类允许您指定位于特定索引的元素。CSS 选择器中的索引编制从 1 开始。

您还可以向这些伪类传递多个索引。如果您想选择所有偶数项，可以使用 :nth-child(even)。

您还可以使用 An+B 微语法创建更复杂的选择器，这些选择器会以固定间隔查找项。

li:nth-child(3n+3) {
    background: yellow;
}

此选择器会选择从第 3 项开始的每三项。此表达式中的 n 是索引，它从 0 开始，3 (3n) 是该索引乘以的倍数。

假设您有 7 个 <li> 项。选择的第一项是 3，因为 3n+3 转换为 (3 * 0) + 3。下一次迭代将选择项 6，因为 n 现在已递增至 1，因此 (3 * 1) + 3)。此表达式同时适用于 :nth-child 和 :nth-of-type。

您可以在此第 n 个子项测试人员或此数量选择器工具中试用此类选择器。

:only-of-type

浏览器支持

  • 1
  • 12
  • 3.5
  • 3.1

来源

最后，您可以使用 :only-of-type 在一组同级元素中找到某一类型的唯一元素。如果您想选择仅包含一个项的列表，或者要查找某个段落中唯一的粗体元素，这会非常有用。

查找空元素

有时，识别完全空的元素可能很有用，而且还有一个伪类可以做到这一点。

:empty

浏览器支持

  • 1
  • 12
  • 1
  • 3.1

来源

如果某个元素没有子元素，则系统会对子元素应用 :empty 伪类。不过，子项不仅仅是 HTML 元素或文本节点，它们也可以是空白，当您要调试以下 HTML 并了解为什么它无法用于 :empty 时，会令人感到困惑：

<div>
</div>

其原因是起始和结束 <div> 之间存在一些空白，因此为空将不起作用。

如果您对 HTML 几乎没有控制权，并且想要隐藏空元素（例如所见即所得内容编辑器），:empty 伪类会非常有用。 在这里，一位编辑者添加了一个零散的段落。

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

借助 :empty，您可以查找和隐藏这些内容。

.post :empty {
    display: none;
}

查找和排除多个元素

一些伪类可以帮助您编写更紧凑的 CSS。

:is()

浏览器支持

  • 88
  • 88
  • 78
  • 14

来源

如果您要在 .post 元素中查找所有 h2、li 和 img 子元素，则可能需要编写如下所示的选择器列表：

.post h2,
.post li,
.post img {
    …
}

您可以使用 :is() 伪类编写更紧凑的版本：

.post :is(h2, li, img) {
    …
}

:is 伪类不仅比选择器列表更紧凑，而且更宽容。在大多数情况下，如果选择器列表中出现错误或选择器不受支持，整个选择器列表将不再起作用。如果 :is 伪类中传递的选择器出现错误，它将忽略无效选择器，但使用有效的选择器。

:not()

浏览器支持

  • 1
  • 12
  • 1
  • 3.1

来源

您还可以使用 :not() 伪类排除项。例如，您可以用它来设置没有 class 属性的所有链接的样式。

a:not([class]) {
    color: blue;
}

:not 伪类还可以帮助您改进无障碍功能。例如，<img> 即使为空值，也必须具有 alt，因此您可以编写 CSS 规则，为无效图片添加红色粗轮廓：

img:not([alt]) {
    outline: 10px red;
}

检查您的掌握程度

测试您对伪类知识的掌握情况

伪类起着类被动态应用到元素的作用，而伪元素则作用于元素本身。

True
请注意在选择器中使用单个或双 : 作为区分字符的键
False
伪元素代表部分，伪类代表状态。

以下哪些是函数伪类？

:is()
🎉
:target
函数伪类后面有 ()，用于指示它们接受形参。
:empty
函数伪类后面有 ()，用于指示它们接受形参。
:not()
🎉

以下哪些伪类是由用户互动造成的？

:hover
🎉
:press
再试一次！
:squeeze
再试一次！
:target
🎉
:focus-within
🎉

以下哪些是 <form> 状态伪类？

:enabled
🎉
:fresh
再试一次！
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
再试一次！
:valid
🎉