CSS的伪类选择器:nth-child()的用法示例
n可以+- , 右边数字只能+
第一到第六的td : td:nth-child(n+1):nth-child(-n+6)
td:nth-child(n+1):nth-child(-n+6)
第二到第八的a : a:nth-child(n+2):nth-child(-n+8)
a:nth-child(n+2):nth-child(-n+8)
文章来源地址https://www.toymoban.com/news/detail-836499.html
1等效0n+1 , 7等效0n+7 , 没有负数,不能倒数
第一个a : (1) 或 (0n+1)
a:nth-child(1)
a:nth-child(0n+1)
第七个a : (7) 或 (0n+7)
a:nth-child(7)
a:nth-child(0n+7)
想"-1",“0n-1”,“-7”,"0n-7"从倒数开始是行不通的
文章来源：https://www.toymoban.com/news/detail-836499.html
第三个及之后的a : (n+3)
a:nth-child(n+3)
前七个a, 第七个及之前的a : (-n+7)
a:nth-child(-n+7)
第三到第七之间的a : a:nth-child(n+3):nth-child(-n+7)
a:nth-child(n+3):nth-child(-n+7)
奇数行 : tr:nth-child(2n+1) 或 tr:nth-child(odd)
tr:nth-child(2n+1)
tr:nth-child(odd)
偶数行 : tr:nth-child(2n) 或 tr:nth-child(even)
tr:nth-child(2n)
tr:nth-child(even)
第2,12,22,32,42,52… 以10个递增 : 10n+2
:nth-child(10n+2)
第52个及之前: 2,12,22,32,42,52… 以10个递减 : -10n+52
:nth-child(-10n+52)
MDN Web 开发技术 :nth-child()
选择器示例
tr:nth-child(odd) or tr:nth-child(2n+1)
表示 HTML 表格中的奇数行：1、3、5……。
tr:nth-child(even) or tr:nth-child(2n)
表示 HTML 表格中的偶数行：2、4、6……。
:nth-child(7)
表示第 7 个元素。
:nth-child(5n)
表示第 5、10、15……个元素。第一个匹配的元素是 0 [=5x0]，但由于元素的索引是从 1 开始的而 n 从 0 开始，所以不会匹配任何元素。这乍一看可能有点奇怪，但是当公式中的 B 部分为 >0 的值时，就会变得更有意义，就像下面的示例一样。
:nth-child(n+7)
表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。
:nth-child(3n+4)
表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……个元素。
:nth-child(-n+3)
表示前三个元素。[=-0+3、-1+3、-2+3]
p:nth-child(n)
表示兄弟元素列表中的每个 <p> 元素。这与简单的 p 选择器选择的元素相同（尽管具有更高的优先级）。
p:nth-child(1) 或 p:nth-child(0n+1)
表示每一个兄弟元素列表中的第一个 <p> 元素。这与 :first-child 选择器相同（并且具有相同的优先级）。
p:nth-child(n+8)``:nth-child(-n+15)
表示兄弟元素列表中的第 8 到第 15 个，且为 <p> 元素的元素。
到了这里，关于CSS的伪类选择器:nth-child()的用法示例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
