结构伪级

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

到目前为止，我们已经了解了如何根据元素的属性和状态来定位元素。 CSS3 还允许我们仅仅根据元素在标记中的位置来定位它们。这些选择器归类于结构性伪类。

现在这些选择器可能看起来很复杂，但当我们稍后查看如何应用它们时，它们就会更有意义。除了IE8及以下版本外，IE9及更新版本以及所有其他浏览器的当前版本和旧版本都支持这些选择器：

:root 根元素，在我们的HTML文件中是html元素。

E:nth-child(n) 第 n 个子元素 E。 n 参数在下面的说明中解释。

E:nth-last-child(n) 第 n 个子元素 F（从最后一个开始倒数）。 li:nth-last-child(1) 将匹配任何列表中的最后一项，这与 li:last-child 相同（参见下面的说明）。

E:nth-of-type(n) 在给定父元素中，第 n 个类型为 E 的元素。 nth-child 和 nth-of-type 之间的区别在下面的说明中解释。

E:nth-last-of-type(n) 与 nth-of-type(n) 相同，但从父元素中的最后一个元素开始倒数。

说明：结构选择器的参数

有四个伪类在括号中采用方程式 an b 作为参数，或者使用关键字 odd 和 even。结构性伪类包括 :nth-child(an b)、:nth-last-child(an b)、:nth-of-type(an b) 和 :nth-last-of-type(an b)。在方程式 an b 中，a 是作为整数的乘数，b 是作为整数的偏移量，n 始终是变量 n。

在最简单的情况下，您可以传递一个整数。例如，E:nth-of-type(3) 将定位单个父元素的第三个 E 元素子元素。您可以传递两个关键字 odd 或 even 之一，以定位其他每个元素。您还可以更有效地传递数字表达式，例如 E:nth-of-type(3n 1)。 3n 表示每三个元素，定义频率， 1 是偏移量。默认偏移量为零，因此，nth-of-type(3n) 将匹配系列中的第 3 个、第 6 个和第 9 个元素，而 nth-of-type(3n 1) 将匹配第 1 个、第 4 个、第 7 个等等。

负偏移量也是允许的。 CSS 基于语言，而不是编程语言，因此计数从 1 开始，而不是 0。乘数 a 和变量 n 之间不能有空格，偏移量必须放在最后。

使用这些数字伪类，您可以精确定位要定位的元素，而无需向标记添加类。最常见的示例是表格，其中每隔一行颜色略深一些，以便于阅读。我们过去必须向每个 tr 添加奇数或偶数类才能实现这一点。现在，我们可以简单地声明 tr:nth-of-type(odd) 来定位每行奇数行，而无需触及标记。您甚至可以更进一步使用三色条纹表：定位 tr:nth-of-type(3n)、tr:nth-of-type(3n 1) 和 tr:nth-of-type(3n 2) 并为每个应用不同的颜色。

E:first-child 如果 E 是其父元素的第一个子元素，则为元素 E。这与 E:nth-child(1) 相同。

E:last-child 如果 E 是其父元素的最后一个子元素，则为元素 E，与 E:nth-last-child(1) 相同。

:first-of-type 与 :nth-of-type(1) 相同。

E:last-of-type 与 :nth-last-of-type(1) 相同。

E:only-child 如果 E 是其父元素的唯一子元素，则为元素 E。

E:only-of-type 如果 E 是其父元素的直接子元素中唯一类型的 E 元素，则为元素 E。

说明：子元素与类型

在使用 nth-of-type 和 nth-child 的结构选择器时，重要的是要理解在这种情况下“子元素”和“类型”的含义。“子元素”查看所有匹配计数的子元素，并检查前驱是否匹配。“类型”首先查看所有匹配前驱的元素，然后根据计数进行匹配。

对于 p:nth-child(3n)，浏览器查看父元素的每个第三个子元素。如果该子元素是 p，则匹配；如果不是，则不匹配。对于 p:nth-of-type(3n)，浏览器查看父元素的所有 p 子元素，并匹配每三个 p。

结构性伪类基于父元素，并为每个新的父元素重新开始计数。它们只查看作为父元素直接子元素的元素。文本节点不是方程式的一部分。

E:empty 没有子元素的元素；这包括文本节点，因此

hello

和

将不会与 p:empty 匹配，但

和

将匹配。此选择器还匹配空元素或无效元素，例如

和。E:lang(en) 使用双字母缩写（例如 en）表示的语言中的元素。与 E:[lang|=en] 不同（其中 lang 属性必须作为元素 E 的属性存在），如果在元素本身或任何祖先上声明了语言，则 E:lang(en) 将匹配 E。

E:not(exception) 这特别有用：它将选择不匹配括号中选择器的元素。

带有 :not 伪类的选择器匹配冒号左侧的所有内容，然后从该匹配组中排除也匹配冒号右侧内容的元素。左侧匹配优先。例如，p:not(.copyright) 将首先匹配文档中的所有段落，然后从该集合中排除也具有版权类的所有段落。您可以将多个 :not 伪类连接在一起。input:not([type=checkbox]):not([type=radio]) 将匹配页面上的所有输入元素，但类型为复选框或单选按钮的元素除外。

结构性伪类的常见问题解答

结构性伪类的不同类型是什么？

结构性伪类是 CSS 伪类的一个子集，允许您根据元素在文档树中的位置来选择和设置元素的样式。它们包括 :root、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type 和 :empty。这些伪类中的每一个都有一个独特的功能，允许更精确地设置 HTML 元素的样式。

:nth-child() 伪类是如何工作的？

:nth-child() 伪类根据元素在一组同级元素中的位置来匹配元素。它接受一个参数，该参数可以是数字、关键字或公式。例如，:nth-child(2) 将选择其父元素的第二个子元素，而 :nth-child(odd) 或 :nth-child(2n 1) 将选择所有奇数编号的子元素。

:nth-of-type() 和 :nth-child() 之间的区别是什么？

虽然 :nth-of-type() 和 :nth-child() 都根据元素的位置选择元素，但它们在计算这些位置的方式上有所不同。:nth-child() 将所有元素都视为同级元素，而不管其类型如何，而 :nth-of-type() 只计算相同类型的元素。例如，如果您有一个包含 li 和 p 元素的列表，:nth-child() 将计算这两种类型的元素，而 :nth-of-type() 将只计算 li 或 p 元素，具体取决于您指定的元素。

如何选择和设置父元素的第一个子元素的样式？

要选择和设置父元素的第一个子元素的样式，可以使用 :first-child 伪类。例如，如果您想更改 ul 内第一个 li 元素的颜色，则可以使用以下 CSS：ul li:first-child { color: red; }。

:only-child 伪类有什么作用？

:only-child 伪类匹配作为其父元素唯一子元素的元素。当您只想在其没有同级元素时才对元素应用样式时，这很有用。例如，您可能只想在 p 元素是 div 的唯一子元素时才向其添加特殊样式。

如何使用 :empty 伪类？

:empty 伪类匹配任何没有子元素的元素。这包括文本节点、注释或其他元素。例如，您可以使用它来隐藏一个空的 div，否则该 div 将占用页面上的空间：div:empty { display: none; }。

可以组合结构性伪类吗？

是的，您可以组合结构性伪类以创建更具体的选择器。例如，您可以将 :nth-of-type() 和 :last-child 组合在一起，以选择其父元素内最后类型的 li 元素，前提是它也是其父元素的最后一个子元素。

所有浏览器都支持结构性伪类吗？

大多数现代浏览器都支持结构性伪类，但在旧版浏览器中可能存在一些不一致之处或缺乏支持。在使用 CSS 中的特定伪类之前，最好始终在 Can I Use 等网站上检查当前的支持级别。

结构性伪类可以与伪元素一起使用吗？

是的，结构性伪类可以与伪元素结合使用。例如，您可以将 ::before 伪元素与 :first-child 伪类一起使用，以在父元素的第一个子元素之前添加内容。

如何使用结构性伪类创建动态样式？

结构性伪类可用于创建响应 HTML 结构的动态样式。例如，您可以将 :nth-child() 伪类与公式一起使用以创建斑马纹表格，或使用 :hover 伪类来更改鼠标悬停时链接的颜色。可能性是无限的，只受您的创造力的限制。

以上是结构伪级的详细内容。更多信息请关注PHP中文网其他相关文章！