CSS 播客 - 015:伪类
假设您有一个电子邮件注册表单,并希望电子邮件表单字段在包含无效电子邮件地址时具有红色边框。该怎么做呢?
您可以使用 :invalid
CSS 伪类,它是浏览器提供的诸多伪类之一。
借助伪类,您可以根据状态变化和外部因素应用样式。这意味着,您的设计可以响应用户输入,例如电子邮件地址无效。选择器模块介绍了这些内容,本单元将详细介绍这些内容。
伪元素与伪元素(您可以在上一个单元中详细了解)不同,伪类与元素可能所处的特定状态不同,它不会一般地为该元素的各个部分设置样式。
互动状态
以下伪类因用户与网页之间的互动而适用。
:hover
如果用户有鼠标或触控板等指控设备,并且他们将其放在某个元素上,您可以使用 :hover
连接到该状态以应用样式。这样可以有效提示某个元素可与之互动。
:active
如果在释放点击之前用户正与某个元素互动(例如点击)时,就会触发此状态。如果使用鼠标等指控设备,则此状态是点击开始且尚未释放。
:focus
、:focus-within
和 :focus-visible
如果某个元素可以获得焦点(例如 <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
:target
伪类用于选择 id
与网址片段匹配的元素。假设您有以下 HTML:
<article id="content">
…
</article>
当网址包含 #content
时,您可以向该元素附加样式。
#content:target {
background: yellow;
}
这对于通过跳过链接突出显示可能已明确链接到的区域(例如网站上的主要内容)非常有用。
历史州/省/自治区/直辖市
:link
: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
如果浏览器停用了某个表单元素(例如 <button>
),您可以使用 :disabled
伪类连接到该状态。:enabled
伪类适用于相反状态,尽管表单元素默认情况下也是 :enabled
,因此您可能无法找到此伪类。
:checked
和:indeterminate
当辅助表单元素(如复选框或单选按钮)处于选中状态时,可以使用 :checked
伪类。
:checked
状态是二进制(true 或 false)状态,但当复选框既未勾选也未取消选中时,它就会处于中间状态。这称为 :indeterminate
状态。
例如,如果您有一个“全选”控件,它可以勾选某个组中的所有复选框。 如果用户随后取消选中其中某个复选框,根复选框将不再表示选中的“全部”,因此应将其设置为不确定状态。
<progress>
元素还具有可以设置样式的不确定状态。一个常见的用例是赋予其条纹外观,表明不知道还需要多少。
:placeholder-shown
如果表单字段具有 placeholder
属性但没有值,则 :placeholder-shown
伪类可用于将样式附加到该状态。一旦字段中有内容,无论其是否具有 placeholder
,此状态将不再适用。
验证状态
您可以使用 :valid
、:invalid
和 :in-range
等伪类响应 HTML 表单验证。:valid
和 :invalid
伪类对于以下上下文非常有用:电子邮件字段需要匹配 pattern
才能成为有效字段。此有效值状态可以显示给用户,帮助他们了解可以安全地移动到下一个字段。
如果输入具有 min
和 max
(例如数字输入),并且其值在这些边界内,则可以使用 :in-range
伪类。
对于 HTML 表单,您可以使用 required
属性确定某个字段是否为必需字段。:required
伪类将可用于必填字段。您可以使用 :optional
伪类来选择非必填字段。
按索引、顺序和出现次数选择元素
有一组伪类,用于根据项在文档中的位置选择项。
:first-child
和:last-child
如果要查找第一项或最后一项,您可以使用 :first-child
和 :last-child
。这些伪类将返回一组同级元素中的第一个或最后一个元素。
:only-child
您还可以使用 :only-child
伪类选择没有同级的元素。
:first-of-type
和:last-of-type
您可以选择 :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
您不限于第一个和最后一个子元素和类型。: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
最后,您可以使用 :only-of-type
在一组同级元素中找到某一类型的唯一元素。如果您想选择仅包含一个项的列表,或者要查找某个段落中唯一的粗体元素,这会非常有用。
查找空元素
有时,识别完全空的元素可能很有用,而且还有一个伪类可以做到这一点。
:empty
如果某个元素没有子元素,则系统会对子元素应用 :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()
如果您要在 .post
元素中查找所有 h2
、li
和 img
子元素,则可能需要编写如下所示的选择器列表:
.post h2,
.post li,
.post img {
…
}
您可以使用 :is()
伪类编写更紧凑的版本:
.post :is(h2, li, img) {
…
}
:is
伪类不仅比选择器列表更紧凑,而且更宽容。在大多数情况下,如果选择器列表中出现错误或选择器不受支持,整个选择器列表将不再起作用。如果 :is
伪类中传递的选择器出现错误,它将忽略无效选择器,但使用有效的选择器。
:not()
您还可以使用 :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