伪级 - 基础知识-css教程-PHP中文网

Pseudo-classes - The Basics

(基于Alexis Goldstein, Louis Lazaris和Estelle Weyl的《HTML5 & CSS3 for the Real World》改编)

核心要点

CSS伪类用于定义元素的特殊状态，包括结构性、用户操作、输入和否定伪类等多种类型。它们可以根据元素在文档树中的位置、用户交互、表单元素状态或与特定选择器不匹配的元素来设置元素样式。

某些伪类可能存在安全问题，例如:visited伪类，攻击者可以利用它检查用户的浏览历史记录。现代浏览器限制了可应用于:visited的样式以防止此问题。为提高可访问性，建议在包含:hover的地方添加:focus，因为并非所有访问者都使用鼠标浏览网站。

虽然大多数现代浏览器都支持所有CSS伪类，但某些旧版浏览器可能不支持某些伪类，例如:nth-child()和:nth-last-child()。像Selectivizr这样的JavaScript库可用于在Internet Explorer等缺乏支持的浏览器中定位这些伪类。

CSS伪类

您可能已经熟悉一些用户交互伪类，即:link、:visited、:hover、:active和:focus。

重要提示：关键要点

:visited伪类可能存在安全问题，因此浏览器不支持在已访问链接上应用所有CSS属性。如果没有这些限制，恶意网站可以对已访问链接应用样式（例如，为每个已访问链接应用唯一的背景图像）来检查用户是否访问过热门网站或银行。这允许攻击者未经许可查看用户的浏览历史记录。因此，现代浏览器限制了可应用于:visited的样式。规范明确允许这些更改，指出：用户代理（UA）可以将所有链接视为未访问链接，或实施其他措施以在呈现已访问和未访问链接的不同方式的同时保护用户的隐私。为提高可访问性，请在包含:hover的地方添加:focus，因为并非所有访问者都使用鼠标浏览您的网站。:hover可以应用于页面上的任何元素，而不仅仅是链接和表单控件。:focus和:active与链接、表单控件、可编辑内容元素以及任何具有tabindex属性的元素相关。

虽然您可能已经使用这些基本的伪类一段时间了，但还有许多其他可用的伪类。其中一些伪类已在规范中存在多年，但在浏览器开始支持使它们更相关的新的HTML5表单属性之前，并未得到支持（或普遍了解）。以下伪类根据属性、用户交互和表单控件状态匹配元素：

:enabled：启用的用户界面元素，基本上是支持disabled属性但当前未应用该属性的任何表单控件。
:disabled：相反，禁用的用户界面元素：任何支持disabled属性并当前已应用该属性的表单控件。
:checked：已选中或勾选的单选按钮或复选框。
:indeterminate：既未选中也未取消选中的表单元素。例如，如果您勾选“全选”复选框以选择一组复选框，然后取消选择该组中的一些但并非所有复选框，则可以将“全选”设置为不确定状态（使用JavaScript）以指示它既未选中也未取消选中。
:target：此选择器选出当前活动页面内锚点的目标元素。这听起来比实际情况复杂：您已经知道，您可以通过在目标的ID之前使用#字符来创建指向页面内锚点的链接。例如，您的页面中可能有一个“跳至内容”链接，单击该链接后，将跳转到ID为“content”的元素。这会将地址栏中的URL更改为thispage.html#content，而:target选择器现在匹配文档中ID为“content”的元素。这就像您临时包含了选择器#content一样。我们说“临时”，是因为一旦用户单击不同的锚点，:target将匹配新的目标。
:default：应用于在一组类似元素中为默认值的的一个或多个UI元素。例如，在页面加载时已选中的一组同名单选按钮中的一个单选按钮，在同名组中的另一个单选按钮被选中后，将继续匹配:default。同样，页面加载时已选中的复选框在取消选中后将继续匹配:default。
:valid：根据类型、模式或其他输入属性（正如我们在第4章中讨论的那样）有效的元素。
:invalid：空必需元素和无法满足类型或模式属性定义的要求的元素。
:in-range：具有范围限制且值在这些限制内的元素。例如，这适用于具有min和max属性的日期/时间、数字和范围输入类型。当值为null时，它是:in-range。
:out-of-range：:in-range的反义词：其值超出其范围限制的元素。缺少的值不在范围内，因为它们是空的。
:required：已设置:required属性的表单控件。
:optional：所有没有:required属性的表单控件。
:read-only：用户无法更改其内容的元素。这大多数是除设置了contenteditable属性的元素和表单字段以外的元素。
:read-write：用户可以更改其内容的元素，例如contenteditable组件和可写输入字段。

在支持其表单控件中属性的浏览器中，对这些属性的浏览器支持是完整的；换句话说，支持required和pattern的浏览器也支持相关的:valid和:invalid伪类。IE8及更早版本不支持:checked、:enabled、:disabled和:target。好消息是IE9确实支持这些选择器，但不支持用户界面选择器。IE10和IE11支持:indeterminate、:required和:optional，但不支持:default、:in-range、:out-of-range、:read-only或:read-write。虽然仍然缺乏支持，但像Selectivizr这样的JavaScript库可以帮助在Internet Explorer中定位这些伪类。