CSS3中的关系和属性选择器

以下摘录自 Alexis Goldstein、Louis Lazaris 和 Estelle Weyl 合着的书籍《HTML5 & CSS3 for the Real World, 2nd Edition》。本书在全球各地的商店有售，您也可以在此处购买电子书版本。

核心要点

• CSS3 选择器允许对网页上的元素进行精确定位，扩展了先前 CSS 版本的功能。关系选择器和属性选择器是 CSS3 的关键特性。
• 关系选择器根据元素在标记中的相互关系来定位元素。这些包括后代组合器 (E F)、子组合器 (E > F)、相邻兄弟选择器或下一个兄弟选择器 (E F) 和通用兄弟选择器或后续兄弟选择器 (E ~ F)。
• CSS3 中的属性选择器允许根据元素的属性进行匹配，CSS3 通过允许模式匹配来扩展 CSS2 的属性选择器。这些包括E[attr]、E[attr=val]、E[attr|=val]、E[attr~=val]、E[attr^=val]、E[attr$=val] 和E[attr* =val]。
• 所有现代浏览器都支持 CSS3 选择器，包括 IE9 及更高版本。使用这些选择器可以大大提高网页设计和开发的效率和有效性。

CSS3 选择器

CSS 选择器是 CSS 的核心。如果没有选择器来定位页面上的元素，修改元素 CSS 属性的唯一方法是使用元素的 style 属性并内联声明样式，这既笨拙又难以维护。因此我们使用选择器。最初，CSS 允许按类型、类和/或 ID 匹配元素。这需要向我们的标记中添加类和 ID 属性来创建挂钩，并区分相同类型的元素。 CSS2.1 添加了伪元素、伪类和组合器。使用 CSS3，我们可以使用各种选择器来定位页面上的几乎任何元素。

在下面的描述中，我们将包含早期 CSS 版本中提供给我们的选择器。之所以包含它们，是因为虽然我们可以使用 CSS3 选择器，但早于 CSS3 的选择器也是 CSS 选择器级别 3 规范的一部分，并且仍然受支持，因为 CSS 选择器级别 3 扩展了它们。即使对于那些已经存在相当一段时间的选择器，也值得在这里回顾一下，因为旧规范中有一些鲜为人知的隐藏的宝石。请注意，所有现代浏览器（包括 IE9 及更高版本）都支持所有 CSS3 选择器。

关系选择器

关系选择器根据元素在标记中的相互关系来定位元素。所有这些都从 IE7 开始支持，并且在所有其他主要浏览器中都支持：

后代组合器 (E F)

您一定应该熟悉这个。后代选择器定位任何作为元素 E 的后代（子元素、孙元素、曾孙元素等）的元素 F。例如，ol li 定位位于有序列表内的 li 元素。这将包括嵌套在 ol 中的 ul 中的 li 元素，这可能不是您想要的。

子组合器 (E > F)

此选择器匹配任何作为元素 E 的直接子元素的元素 F——任何进一步嵌套的元素都将被忽略。继续上面的例子，ol > li 只会定位直接位于 ol 内的 li 元素，并将忽略嵌套在 ul 内的那些元素。

相邻兄弟选择器或下一个兄弟选择器 (E F)

这将匹配任何与 E 共享相同父元素的元素 F，并且在标记中直接位于 E 之后。例如，li li 将定位给定容器中的所有 li 元素，除了第一个 li 元素。

通用兄弟选择器或后续兄弟选择器 (E ~ F)

这个有点棘手。它将匹配任何与任何 E 共享相同父元素并在标记中位于其之后的元素 F。因此，h1 ~ h2 将匹配任何位于 h1 之后的 h2，只要它们都共享相同的直接父元素——也就是说，只要 h2 没有嵌套在任何其他元素中。

让我们来看一个简单的例子：

<header>
  <h1 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

选择器字符串 h1 ~ h2 将匹配第一个 h2，因为 h1 和 h2 都是 header 的子元素或直接后代。您将在代码片段中看到的下一个 h2 不匹配，因为它的父元素是 article，而不是 header。但是，它将匹配 header ~ h2。类似地，h2 ~ p 只匹配最后一个段落，因为第一个段落位于它与父元素 article 共享的 h2 之前。

注意：为什么没有“父”选择器？

您会注意到，到目前为止，还没有“父”或“祖先”选择器，也没有“前置兄弟”选择器。浏览器必须向后遍历 DOM 树或在决定是否应用样式之前递归到嵌套元素集的性能，阻止了拥有原生“向上遍历 DOM 树”选择器的能力。

jQuery 包含 :has() 作为祖先选择器。此选择器正在考虑用于 CSS 选择器级别 4，但尚未在任何浏览器中实现。如果并当它被实现时，我们将能够使用 E:has(F) 来查找具有 F 作为后代的 E，E:has(> F) 来查找具有 F 作为直接子元素的 E，E:has( F) 来查找直接位于兄弟 F 之前的 E，以及类似的。

浏览《The HTML5 Herald》的样式表，您会看到我们在许多地方使用了这些选择器。例如，在确定站点的整体布局时，我们希望三个列的 div 向左浮动。为了避免将此样式应用于嵌套在其内部的任何其他 div，我们使用子选择器：

main > div {
  float: left;
  overflow: hidden;
}

随着我们在接下来的几章中向站点添加新样式，您将看到许多此类选择器类型。

属性选择器

CSS2 引入了几个属性选择器。这些允许根据元素的属性进行匹配。CSS3 扩展了这些属性选择器，允许基于模式匹配进行一些定位。CSS 选择器级别 4 添加了一些更多内容：

E[attr] 匹配任何具有属性 attr 的元素 E，而不管属性的值如何。我们在第 4 章中使用了它来设置必需输入的样式；input:required 在最新的浏览器中有效，但 input[required] 也具有相同的效果，并且在 IE7 和 IE8 中也有效。

E[attr=val] 匹配任何具有属性 attr 且其值为 val 的元素 E。虽然不是新的，但在定位表单输入类型时它很有用；例如，使用 input[type=checkbox] 定位复选框。

E[attr|=val] 匹配任何其属性 attr 的值为 val 或以 val- 开头的元素 E。这最常用于 lang 属性。例如，p[lang|="en"] 将匹配任何被定义为英语的段落，无论是英国英语还是美国英语，使用

或

。

E[attr~=val] 匹配任何其属性 attr 的值中包含完整单词 val（由空格包围）的元素 E。例如，.info[title~=more] 将匹配任何具有类 info 且标题属性包含单词“more”的元素，例如“单击此处了解更多信息”。

E[attr^=val] 匹配任何其属性 attr 以值 val 开头的元素 E。换句话说，val 与属性值的开头匹配。

E[attr$=val] 匹配任何其属性 attr 以 val 结尾的元素 E。换句话说，val 与属性值的结尾匹配。

E[attr=val] 匹配任何其属性 attr 在任何位置与 val 匹配的元素 E。它类似于 E[attr~=val]，只是 val 可以是单词的一部分。使用与之前相同的示例，.fakelink[title=info] {} 将匹配任何具有类 fakelink 且标题属性包含字符串 info 的元素，例如“单击此处了解更多信息”。

在这些属性选择器中，对于 HTML 中区分大小写的 value，val 的值区分大小写。例如，input[class^="btn"] 区分大小写，因为类名区分大小写，但 input[type="checkbox"] 不区分大小写，因为 type 值在 HTML 中不区分大小写。

如果值是字母数字的，则不必引用值，但有一些例外。空字符串、以数字开头的字符串、两个连字符和其他一些特殊情况需要用引号括起来。由于存在例外情况，因此养成始终为需要引号的情况包含引号的习惯是一个好主意。

在 CSS 选择器级别 4 中，我们可以通过在结束括号之前包含一个 i 来实现不区分大小写，E[attr*=val i]。

CSS3 中关系选择器和属性选择器的常见问题

CSS3 中关系选择器和属性选择器有什么区别？

CSS3 中的关系选择器用于根据元素与 HTML 文档中其他元素的关系来选择元素。例如，子元素、后代、相邻兄弟和通用兄弟选择器都是关系选择器的类型。另一方面，属性选择器用于根据元素的属性或属性值来选择元素。例如，您可以使用属性选择器选择所有类型属性为“text”的输入元素。

如何在 CSS3 中使用子组合器？

CSS3 中的子组合器由“>”符号表示。它用于选择特定元素的直接子元素。例如，如果您想选择具有类“parent”的父元素的所有直接子 div 元素，则应编写如下 CSS：

.parent > div { /* CSS 属性在此处 */ }

我可以在 CSS3 中使用多个属性选择器吗？

是的，您可以在 CSS3 中使用多个属性选择器。这允许您选择满足多个属性条件的元素。例如，如果您想选择所有类型属性为“text”且名称属性为“username”的输入元素，则应编写如下 CSS：

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

CSS3 中相邻兄弟组合器的用途是什么？

CSS3 中的相邻兄弟组合器由“ ”符号表示。它用于选择直接位于另一个特定元素之后的元素，并且这两个元素共享相同的父元素。例如，如果您想选择直接位于 p 元素之后的 div 元素，则应编写如下 CSS：

p div { /* CSS 属性在此处 */ }

如何在 CSS3 中选择具有特定属性值的元素？

要在 CSS3 中选择具有特定属性值的元素，请使用带方括号的属性选择器、属性名称和值。例如，如果您想选择所有类型属性为“text”的输入元素，则应编写如下 CSS：

input[type="text"] { /* CSS 属性在此处 */ }

我可以在 CSS3 中组合关系选择器和属性选择器吗？

是的，您可以在 CSS3 中组合关系选择器和属性选择器。这允许您根据元素与其他元素的关系及其属性来选择元素。例如，如果您想选择具有类“form”的表单元素的所有直接子输入元素，其中输入元素的类型属性为“text”，则应编写如下 CSS：

form.form > input[type="text"] { /* CSS 属性在此处 */ }

CSS3 中的通用兄弟组合器是什么？

CSS3 中的通用兄弟组合器由“~”符号表示。它用于选择特定元素的兄弟元素，而不管它们在 HTML 文档中的顺序如何。例如，如果您想选择 p 元素的所有兄弟 div 元素，则应编写如下 CSS：

p ~ div { /* CSS 属性在此处 */ }

如何在 CSS3 中选择不具有特定属性的元素？

要在 CSS3 中选择不具有特定属性的元素，请使用带有属性选择器的 :not() 伪类。例如，如果您想选择所有类型属性不为“submit”的输入元素，则应编写如下 CSS：

input:not([type="submit"]) { /* CSS 属性在此处 */ }

我可以在 CSS3 中将关系选择器与伪类结合使用吗？

是的，您可以在 CSS3 中将关系选择器与伪类结合使用。这允许您根据元素与其他元素的关系及其状态来选择元素。例如，如果您想选择导航元素的所有直接子 a 元素，这些元素正在被悬停，则应编写如下 CSS：

nav > a:hover { /* CSS 属性在此处 */ }

如何在 CSS3 中选择包含特定值的特定属性的元素？

要在 CSS3 中选择包含特定值的特定属性的元素，请使用带方括号的属性选择器、属性名称和值以及 *= 运算符。例如，如果您想选择所有 href 属性包含“example”的 a 元素，则应编写如下 CSS：

a[href*="example"] { /* CSS 属性在此处 */ }

以上是CSS3中的关系和属性选择器的详细内容。更多信息请关注PHP中文网其他相关文章！