css3中的结构伪类选择器

来源：互联网发布：onlyanna淘宝编辑：程序博客网时间：2024/05/22 03:04

结构伪类选择器

作用：可以根据元素在文档树中的某些特性（如他们的相对位置）定位到他们。

好处：通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的定义帮助你保持代码干净和整洁。

语法：E;first-chlid = E:nth-child(1);

E:last-child = E:nth-last-child(1);

E;root

:root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如：

:root { background-color: #fcfcfc; }

除了给 <html> 元素设定样式，这个伪类基本没什么价值，可能也就描述性稍强些：

html { background-color: #fcfcfc; }

E:nth-child() odd代表奇数 even代表偶数

:nth-child() 选择器可能需要一些实践才能完全理解。最简单的记忆方法是使用关键词“奇数或偶数”（odd或 even），因为在显示由行列组成的数据表格时，这将非常有用。例如，我们可以使用下列内容：

ul li:nth-child(odd) {background-color: #666;color: #fff; }

这将使无序列表中的每个奇数行高亮显示。您可能会发现在表格中使用这种技术非常方便。例如：

table tr:nth-child(even) { … }

:nth-child 选择器更明确灵活，因此，你可以选择列表的第三个元素，像这样：

li:nth-child(3) { … }

请注意 n 并不是从零开始，第一个元素是 :nth-child(1)，第二个是 :nth-child(2)，以此类推。

我们也可以利用一些简单的代数，使它变得更加精彩。考虑以下代码：

li:nth-child(2n) { … }

当我们以这种方式使用 n，它代表对所有正整数，直到文档耗尽可选择的元素。在这种情况下，它会选择下列列表项：

未选择元素 (2 × 0)
第 2 个元素 (2 × 1)
第 4 个元素 (2 × 2)
第 6 个元素 (2 × 3)
第 8 个元素 (2 × 4)
等等…

这实际上和使用 :nth-child(even) 完全一致。因此我们混入点东西：

li:nth-child(5n) { … }

对应选择的节点元素：

未选择元素 (5 × 0)
第 5 个元素 (5 × 1)
第 10 个元素 (5 × 2)
第 15 个元素 (5 × 3)
第 20 个元素 (5 × 4)
等等…

对于长列表或表格而言，也许这将很有用，也可能完全无用。我们还可以在这一公式中执行数字加减法：

li:nth-child(4n + 1) { … }

对应选择的节点元素：

第 1 个元素 ((4 × 0) + 1)
第 5 个元素 ((4 × 1) + 1)
第 9 个元素 ((4 × 2) + 1)
第 13 个元素 ((4 × 3) + 1)
第 17 个元素 ((4 × 4) + 1)
等等…

这里 SitePoint 指出了一个怪癖的功能，如果你将 n 设置为负值，则可以像这样选择前 x 项。

li:nth-child(-n + x) { … }

如果你期望选择前 5 项，可以这样写：

li:nth-child(-n + 5) { … }

对应选择的节点元素：

第 5 个元素 (-0 + 5)
第 4 个元素 (-1 + 5)
第 3 个元素 (-2 + 5)
第 2 个元素 (-3 + 5)
第 1 个元素 (-4 + 5)
未选择元素 (-5 + 5)
未选择元素 (-6 + 5)

0 0