了解 CSS3 选择器，第二部分：基于状态、目标和否定伪类

30 天开发一个 Windows 8 应用

在本系列文章的第一部分中，我介绍了新的 CSS3 结构伪类，它们根据元素在文档树中的位置或其他元素的关系来定位元素。在本文中，我将回顾 CSS3 中引入的其余伪类：基于状态、目标和否定伪类。但在您深入研究之前，请花点时间阅读有关伪类和 CSS3 选择器基础知识的第一部分。

UI 元素状态伪类

结构伪类依赖于元素的相对位置，而基于状态的伪类则根据元素的当前状态来定位元素，例如元素是否处于活动状态或焦点状态。您应该已经熟悉状态伪类的概念（例如 :link、:visited、:hover 和 :active），这些概念在 CSS1 中已为锚点 (<a>) 元素引入。

在 CSS2.1 中，引入了 :focus 伪类，它将基于状态的选择器扩展到超链接之外，用于输入和 textarea 等表单元素。CSS3 引入了另外三个伪类，可用于定位表单元素的 UI 状态：:disabled、:enabled 和 :checked。

语法回顾

所有 伪类的语法都很简单。每个伪类名称都以冒号开头

:pseudo-class {}

您的选择器可以只包含伪类，就像前面的示例一样，这将定位所有相关元素，或者您可以更具体地通过将伪类附加到元素（e）、类或 ID 选择器，如下所示

e:pseudo-class {}
.class:pseudo-class {}
#id:pseudo-class {}

对于基于状态的伪类，当 UI 中指定的状态为 true 时，浏览器才会应用选择器。在以下示例中，只有当用户将鼠标悬停在链接上时，指定的样式才会显示在屏幕上。其他所有链接状态都不会显示这些样式。

a:hover {
  background-color: #ccc;
  text-decoration: none;
}

:disabled

:disabled 伪类定位具有 disabled 属性的 input 元素，这使得 input 元素无法点击且不可用

<input type="text" name="name" disabled />

此示例使用 HTML5 中的布尔 disabled 属性，但您也可以在以前版本的 HTML 中声明此属性

<input type="text" name="name" disabled="disabled" />

对于这两种方法，大多数浏览器都使用 disabled 输入的默认显示方式，其中字段边框与 enabled 输入相比略微变灰，如图 1 所示。

但是，您可以使用 :disabled 伪类来覆盖此默认样式并获得图 2 所示的结果。

input:disabled {
  background-color: #ccc;
  border: 0;
  padding: 3px 2px;
}

如果您不使用布尔 disabled 属性，您也可以使用 属性选择器 来实现此效果

input[disabled="disabled"] {
  background-color: #ccc;
  border: 0;
  padding: 3px 2px;
}

您最终选择使用哪个选择器取决于您的项目。

:enabled

:enabled 伪类定位输入的默认 enabled 状态

input:enabled {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(125,104,99);
}

由于表单元素的默认状态是 enabled，我不确定何时需要使用此选择器。元素选择器同样有效，甚至可能更好，具体取决于项目。但为了演示，请考虑一个带有单选按钮的简短表单，其中包含一个 Other 选项，允许用户在文本输入中输入自己的值。此表单的 HTML 如图 3 所示，图 4 显示了表单。

<form>
  <legend>What's your favorite zombie movie?</legend>
  <input type="radio" name="FavMovie" id="28Days" />
  <label for="28Days">28 Days
    Later</label>
  <input type="radio" name="FavMovie" id="Army" />
  <label for="Army">Army of
    Darkness</label>
  <input type="radio" name="FavMovie" id="Night" />
  <label for="Night">Night of the
    Living Dead</label>
  <input type="radio" name="FavMovie" id="Reanim" />
  <label for="Reanim">Re-
    Animator</label>
  <input type="radio" name="FavMovie" id="Shaun" />
  <label for="Shaun">Shaun of the
    Dead</label>
  <input type="radio" name="FavMovie" id="Other" />
  <label for="Other">Other</label>
  <input type="text" id="OtherEntry" disabled />
  <input type="submit" />
</form>

在 HTML 中，Other 选项的文本输入被设置为 disabled，我保留了默认的浏览器样式。但是，当用户选择 Other 单选按钮时，我想启用 disabled 输入。可以使用 少量 JavaScript 移除 disabled 属性，样式也可以略微改变，如下所示，以帮助通知用户该输入字段可以接受输入。表单现在显示为图 5 所示。

input:enabled {
  background-color: rgb(255, 255, 204);
}

:checked

:checked 伪类定位选中的单选按钮和复选框输入。这允许您为开发人员通过 checked 属性预选的元素或用户在 UI 中选择的元素设置样式。当单选按钮（或复选框）列表很长或呈矩阵状时，用户可能很难确定哪个选项被选中，此时 :checked 伪类可能很有用。为简便起见，我们来看一下 :checked 如何应用于一个简单的 opt-out 表单，其中一个单选按钮是预选的（参见图 6）。

此示例的 HTML 包括一个带有布尔 checked 属性的单选按钮

<form>
  <legend>Do you want text notifications of the zombie apocalypse?</legend>
  <input type="radio" name="notify" id="yes" checked /><label for="yes">Yes</label>
  <input type="radio" name="notify" id="no" /><label for="no">No</label>
  <input type="submit" />
</form>

这是定位选中的单选按钮的 CSS

input:checked {
  border: 1px solid rgb(255, 0, 0);
}

考虑到可以与其他选择器结合使用这些伪类，我可以更具体地将 :checked 与属性选择器结合使用

input[type="radio"]:checked {
  border: 1px solid rgb(255, 0, 0);
}

不幸的是，大多数浏览器都限制了对单选按钮和复选框输入的样式设置。在这些情况下，使用 :checked 选择器指定的样式将不会显示。在我使用的浏览器中，只有 Opera/OS X 显示了图 6 所示的结果，坦白说，这很丑陋，可能会让用户感到困惑。

但是，您可以将 :checked 伪类与 相邻兄弟组合子 结合使用来设置选中单选按钮的标签文本的样式。这是 CSS。您可以在图 7 中看到结果。

input:checked + label {
  background-color: rgb(255, 255, 204);
  color: rgb(255, 0, 0);
}

:target 伪类

CSS3 还包含一些新的伪类，它们不是结构性的也不是基于状态的。 :target 伪类选择一个 id 元素，该元素通过片段标识符链接。片段标识符出现在 URL 的末尾，以井号 (#) 开头，后跟一个锚点 (<a>) 名称或元素 ID。

例如，在一篇长文章中，我可能想包含一个目录，链接到文章的主要部分。（见图 8。）要设置此项，我需要为要定位的内容（在这种情况下是标题）分配 id 以充当片段标识符

<h2 id="rotnruin">Rot & Ruin</h2>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris...</p>
<h2 id="romero">Romero Zombies</h2>
<p>Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe ...<p>

然后我需要链接到这些 id

<ul>
  <li><a href="#rotnruin">Rot & Ruin</a></li>
  <li><a href="#romero">Romero Zombies</a></li>
  ...
</ul>

在设置好 HTML 结构后，我可以设置 h2 元素的样式，以便在用户通过目录链接跳转到某个部分时，它们具有不同的外观。这是 CSS，结果如图 9 所示。

h2:target {
  background: rgb(125,104,99);
  border: 0;
  color: rgb(255, 255, 255);
  padding-left: 10px;
}

否定伪类

被称为否定伪类，:not(x) 定位不匹配括号中指定的选择器 (x) 的元素。:not(x) 的语法允许指定几乎所有类型的选择器，从简单的元素、id 或类选择器到组合子和其他伪类。

例如，您可以为不是 section 元素子项的所有链接、没有指定 class="intro" 的所有段落或不是提交按钮的 input 元素指定样式

:not(section) a {}
p:not(.intro) {}
input:not([type="submit"]) {}

为什么要使用伪类？

很容易看到这些伪类（以及第一部分中介绍的伪类）并想知道为什么要在它们与（有争议的）更直接的选择器之间进行选择。答案与您正在处理的项目有关。

有时，CMS 会限制对标记的访问，这意味着您无法添加 id 或类。对于一些遗留系统来说也是如此。有时会出现独特的情况，使得这些伪类有意义。

理解这些选择器的目标，至少对我来说，不是只选择一个并专门使用它。相反，它是关于构建一个您可以用于任何情况或项目的选项库。

浏览器支持和处理

正如我在第一部分中所详细介绍的，所有现代浏览器，包括 Internet Explorer 10 和 9，都 支持 CSS3 伪类。如果您针对的是对 CSS3 选择器支持有限或存在 bug 的旧版本浏览器，则需要使用 polyfill，例如 Selectivizr。

还值得一提的是，浏览器处理 CSS3 选择器的效率 相对较低。同样，您使用的应该始终取决于您的项目。如果您需要帮助评估选择器的性能，请查看 CSS Lint 和 CSS Test Creator。

额外资源

本系列两篇文章涵盖了 CSS3 伪类的基础知识，但还有更多内容可以尝试。我推荐以下在线资源，以获取更多关于可能性的想法

• 从后往前理解 CSS 结构伪类
• CSS3 伪类和 HTML5 表单
• 关于 :target
• 使用 CSS3 否定伪类进行元素过滤
• 负邻近选择器

此外，我强烈推荐 Zoe Gillenwater 的 Stunning CSS3。在这本书中，您将获得大量伪类的实际示例，以及大量其他出色的 CSS3 信息和资源。

本文由 Emily Lewis 撰写。Emily Lewis 是一位标准的自由职业网页设计师，这意味着她对语义标记和 CSS、可用性和可访问性等内容充满热情。作为她传播标准优良信息的一项持续努力，她在她的博客 A Blog Not Limited 上撰写有关网页设计的内容，并且是 Microformats Made Simple 的作者，也是 HTML5 Cookbook 的撰稿人。她还是 Web Standards Sherpa、.net 杂志和 MIX Online 的特约撰稿人。

除了热爱所有与 Web 相关的事物之外，Emily 还热衷于社区建设和知识共享。她共同创立并共同管理 Webuquerque（新墨西哥州 Web 专业人士的 Adobe 用户组），并且是 The ExpressionEngine Podcast 的联合主持人。Emily 还应邀在全国各地的会议和活动上发表演讲，包括 SXSW、MIX、In Control、Voices That Matter、New Mexico Technology Council、InterLab 和新墨西哥大学。

在以下平台找到Emily：

• Twitter - @emilylewis
• Emily的博客
• Emily Lewis Design