CSS3——:nth-child选择器基本用法简述

好吧，你提到的第四个孩子选项真的很酷。
上次我帮助朋友更改他们的活动页面时使用了它。
让我告诉你一些我实际使用过的：
---
最常见的场景：交错颜色变化 如果你考虑一个表格或一个列表；更改交替行颜色的最简单方法是使用 nth-child(odd) 和 nth-child(even)。
例如： CSS tr:nth-child(奇数) { 背景颜色: f2 f2 f2 ; } tr:nth-child(偶数) { 背景颜色: ffffff;
我在做2 02 3 年杭州某电商网站活动页面时现场使用过，非常方便。
但它是1 级； 3 、5 未选择。
请注意数字行（第 1 、3 、5 行...）。
：不要与 nth-child(2 n+1 ) 混淆。

---
多重选择：对每个元素进行特殊处理 有时您需要突出显示导航菜单中的每三个元素，例如每三个类别的特殊样式： CSS li:nth-child(3 n) { 字体粗细：粗体；
它被用于在上海一家购物中心主页上的一个广场上发出信号。
例如，如果有 1 0 个点，则将选择 3 个 6 和 9 这里 3 n of n 从 1 而不是 1 开始计数到 0。

---
范围选择：前几个或后几个 例如，仅在父级特殊样式中创建前三个 p： CSS p:nth-child(-n+3 ) { 颜色：红色；
2 02 2 年我们做APP介绍页面的时候我会用它。
这特别有用。
所有parent中的前3 p都不会被选择，但是parent中的前3 p也不会被选择。
记住n是从0开始计数的；所以 -n+3 的意思是“从第一个中选择第三个”。

---
负范围：从某个位置到末尾 例如，从父级中的第四个元素开始的所有 div： CSS div:nth-child(n+4 ) { 顶部边距: 2 0px;
修改北京某公司官网时使用的。
4 是父级中的第 4 个及后续 div；第5 个第6 个...直到最后一个将被选择。

---
公式选项：偏移更灵活。
例如，从第 2 个元素开始选择第 5 个元素： CSS p:nth-child(5 n+2 ) { 文本装饰：下划线；
我以前也经历过这种情况。
5 n+2 ，其中n从0开始；因此，将选择第 7 个、第 1 2 个和第 1 7 个 p（因为 5 1 +2 =7 、5 2 +2 =1 2 ...）。
不要与 2 n+1 混淆，后者在所有奇数位置选择 p。

---
血与泪的教训 2 01 9 年，我在广州做了一个小程序，使用nth-child(2 n+1 )来改变数字行的颜色。
我忘记了n是从0开始的，选择了nth-child(2 n-1 )。
整个桌子乱七八糟...花了3 个小时才把它搬回来。
很生气。
请记住，n 从 1 开始计数；但在公式中它是从 0 开始的。

---
无论如何都可以做任何你想做的事。
这些视图使用得最多。
对于复杂的公式，可以使用在线生成器，例如 [CSS:nth-child 选择器生成器](https://www.csscomb.com/zh-hans/)我建议你尝试一下。
先练习一些简单的东西还不够吗？

css3有没有除第一个子元素以外的元素的选择器

说实话，我一直对 CSS 选择器很感兴趣，尤其是 :not(:first-child) 和 :nth-child(n+2 )，它们使用起来特别免费。
当我修改一个古老项目的代码时，我遇到了一堆嵌套的 。
前几个有特殊的样式，但突然我不得不跳过第一个，直接为第二个添加边框。
我想了很长时间。

:not(:first-child) 其实很容易理解。
这是“E:not(s)”，表示选择所有不匹配selector的元素。
例如，如果您编写 .list-item:not(:first-child)，这意味着选择所有不是 .list-item 中第一个的同级项。
我用它来为导航栏创建一条分界线。
除了第一个 之外，其前面没有竖线，而是全部在其后面。
这可以通过一行代码来完成，这比使用 nth-child 容易得多。

nth-child(n+2 ) 有点令人困惑。
“nth-child”表示哪个元素是子元素，“n+2 ”从第二个开始（注意这里n从0开始）。
例如，如果编写 :nth-child(2 n+2 )，则效果与 :nth-child(n+2 ) 相同，即选择偶数位置的所有元素。
我用它突出显示表中的每三行，将 n 设置为 3 并编写代码：nth-​​child(3 n+2 )。
结果，第2 、5 、8 行添加了背景色……有趣的是，通过调整n的值可以轻松控制间距，相当灵活。

扩展信息中的这些选择器中，给我印象最深的是：nth-​​last-child(n)和:nth-last-of-type(n)。
:nth-last-child(2 ) 选择父元素的倒数第二个子元素，而 :nth-last-of-type(2 ) 选择相同类型的倒数第二个元素。
上次我修改表单时，有一个输入字段，我只想隐藏在它的前面并显示在后面。
我使用 :nth-last-of-type(2 ) 来清楚地定位它。

:first-child 和 :last-child 没什么好说的，:only-child 和 :only-of-type 也很有用。
以前我在做响应式布局的时候，有时会遇到容器里只有一个按钮的情况。
我使用 :only-child 添加自定义样式，而无需对 id 或 class 进行硬编码，并且代码变得更加简洁。

:root 是一个我不常遇到的选择器，但是请记住它用于选择 HTML 根元素，例如 :root，有时与 CSS 变量结合使用。

但说实话，用这些选择器写的CSS有时显得有点“残酷”，尤其是嵌套太多的话，代码的可读性就会变差。
后来，当我写新项目时，我尝试使用类选择器来代替，这在性能和可维护性方面更有好处。
但有时，当您面对旧代码时，这些选择器仍然非常有用。
根据资料，我记得是IE9 开始支持大部分这样的选择器。
我建议你检查MDN以获取具体版本号。
我记不太清楚了。