感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

伪类

CSS 播客 - 015：伪类

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

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

与伪元素不同，您可以在上一单元中详细了解相关内容，伪类会挂接到元素可能处于的特定状态，而不是笼统地设置该元素各个部分的样式

交互状态

以下伪类是因用户与您的网页进行互动而应用的。

`:hover`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

如果用户拥有鼠标或触控板等指控设备，然后将其放在某个元素上则可以连接到该状态 :hover：用于应用样式。这是提示用户可与元素互动的实用方法。

`:active`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

如果某个元素可以获得焦点（例如 <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`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

如果网址包含 #content，您可以向相应元素附加样式。

#content:target {
    background: yellow;
}

这对于突出显示可能具体链接到的区域非常有用，例如网站上的主要内容。

历史悠久的州

`:link`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

注意：出于安全考虑，您只能使用 :visited 伪类更改由 :link 定义的样式或未访问状态定义的样式，因此请务必先定义可更改的样式。坚持 LVHA 法则有助于解决这个问题。

表单状态

以下伪类可以选择表单元素，以及这些元素在与它们互动时可能处于的各种状态

`:disabled`和`:enabled`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

如果是表单元素例如 <button> 被浏览器停用，您就可以使用 :disabled 伪类。 :enabled 伪类适用于相反状态，虽然表单元素默认也处于 :enabled 状态，因此您可能找不到此伪类。

`:checked`和`:indeterminate`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

:checked 伪类可用，但存在辅助表单元素，（例如复选框或单选按钮）的状态。

:checked 状态是二进制（true 或 false）状态，但复选框在既没有选中也未取消选中时具有中间状态。这称为 :indeterminate 状态。

例如，在“全选”选项下用于选中某个组中的所有复选框的控件。如果用户随后要取消选中其中一个复选框根复选框将不再表示“all”正在接受检查因此应处于不确定状态

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

`:placeholder-shown`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

验证状态

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

您可以使用伪类（如 :valid、 :invalid和 :in-range。 :valid 和 :invalid 伪类对于上下文非常有用例如包含需要匹配的 pattern 的电子邮件字段，才能成为有效字段。可以向用户显示这个有效值状态帮助他们了解自己可以安全地进入下一个领域。

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

对于 HTML 表单您可以通过 required 属性确定某个字段是否为必填字段。 :required 伪类将可用于必填字段。可以通过 :optional 伪类。

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

有一组伪类根据项在文档中的位置来选择这些项。

`:first-child`和`:last-child`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

`:only-child`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

您还可以选择那些没有同级的元素，替换为 :only-child 伪类。

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

您可以选择 :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`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

您还可以创建更复杂的选择器，以定期间隔查找内容；使用 An+B 微语法。

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

此选择器选择每三项从第 3 项开始。此表达式中的 n 是索引，从零开始，3 (3n) 就是该索引乘以该指数的数值。

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

您可以利用这种选择器 nth-child tester 或数量选择器工具。

`:only-of-type`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

最后，您可以使用 :only-of-type。如果您想选择仅包含一项内容的列表，或想查找段落中唯一的粗体元素。

查找空元素

有时，识别完全空元素很有用，还有一个对应的伪类。

`:empty`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

如果某个元素没有子元素， :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()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

如果您想查找 .post 元素中的所有 h2、li 和 img 子元素，您可能会认为编写如下选择器列表：

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

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

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

:is 伪类不仅比选择器列表更紧凑，而且容忍度也更高。在大多数情况下如果选择器列表中存在错误或不受支持的选择器，整个选择器列表将不再起作用。如果 :is 伪类中传递的选择器存在错误，系统会忽略无效的选择器，改为使用有效的选择器。

`:not()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

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

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

检查您的理解情况

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

伪类的作用就像类已动态应用于元素一样，而伪元素则作用于元素本身。

正确

请注意选择器中是否使用单个或两个 : 作为关键区分字符

错误

伪元素代表部分，伪类代表状态。

以下哪些是函数伪类？

:is()

🎉

:target

函数伪类后面有 ()，以表示它们接受形参。

:empty

函数伪类后面有 ()，以表示它们接受形参。

:not()

🎉

以下哪些伪类是由用户互动导致的？

:hover

🎉

:press

再试一次！

:squeeze

再试一次！

:target

🎉

:focus-within

🎉

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

:enabled

🎉

:fresh

再试一次！

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

再试一次！

:valid

🎉

伪类

CSS 播客 - 015：伪类

交互状态

:hover

:active

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

:target

历史悠久的州

:link

:visited

顺序很重要

表单状态

:disabled和:enabled

:checked和:indeterminate

:placeholder-shown

验证状态

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

:first-child和:last-child

:only-child

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

:nth-child和:nth-of-type

:only-of-type

查找空元素

:empty

查找并排除多个元素

:is()

:not()

检查您的理解情况

`:hover`

`:active`

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

`:target`

`:link`

`:visited`

`:disabled`和`:enabled`

`:checked`和`:indeterminate`

`:placeholder-shown`

`:first-child`和`:last-child`

`:only-child`

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

`:nth-child`和`:nth-of-type`

`:only-of-type`

`:empty`

`:is()`

`:not()`