结构伪类选择器
作用:可以根据元素在文档树中的某些特性(如他们的相对位置)定位到他们。
好处:通过文档树结构的相互关系来匹配特定的元素,从而减少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)