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

说到nth-child选择器，当我第一次遇到它时我很困惑。
但现在用的多了，也慢慢了解了。

我们先举个例子。
例如，如果您的网页的 body 标记中有多个 p 元素，并且您想要为第二个 p 元素添加背景颜色，只需键入：p:nth-child(2 )。
这意味着您找到所有 p 元素，首先对它们进行计数，然后为它们添加背景。

但是，您必须注意。
如果p元素之前还有其他元素，比如h1 ，那就不一样了。
h1 也会被算作一个元素，所以p:nth-child(1 )实际上指的是h1 ，那么p:nth-child(2 )才是真正的第二个p元素。
你必须小心不要混淆。

我们来谈谈3 n、2 n之类的。
这用于按特定顺序选择项目。
例如，如果要为所有 3 倍数的 p 元素添加背景颜色，只需键入 p:nth-child(3 n)。
2 n是2 的倍数，4 n是4 的倍数，这个很容易理解。

然后是奇数和偶数，这两个是英文单词，odd是奇数，even是偶数。
因此 p:nth-child(odd) 是所有奇数编号的 p 元素，p:nth-child(even) 是所有偶数编号的 p 元素。

还有公式(an+b)，当时没看懂。
查资料发现这是用来表达循环的。
例如，p:nth-child(2 n+1 )，这可以很容易地理解为等价于p:nth-child(odd)。
p:nth-child(2 n+0) 等价于 p:nth-child(even)。

我们来谈谈这个p:nth-child(n+2 )。
这从第二个元素开始，包括第二个元素，并以最后一个元素结束。
比如1 到5 有5 个元素，n+2 从2 开始，到5 就是2 ,3 ,4 ,5
最后一个p:nth child(-n+5 )有点复杂。
它从最后一个元素开始向后计数到第一个元素。
比如从1 到5 ，这个选择器会选择5 个元素：5 、4 、3 、2 和1
总之，第n个子选择器非常方便。
如果使用得当，它可以帮助您创建漂亮的网站效果。
不过，一开始确实有点困难，所以你需要多练习。

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

哈哈，说到CSS选择器，我在问答论坛混了很多年，见过很多前端新手苦苦挣扎。
我记得刚开始的时候，我对这类选民感到困惑。
现在回想起来，还蛮有趣的。

我们先来谈谈:not(:firstborn)。
事实上，这是相当方便的。
例如，如果您想要选择列表中除第一个子项目之外的所有项目，请使用此选项。
简而言之，它选择所有不是第一个子元素的元素。
我记得当时有一个例子，即将样式添加到导航栏中的列表中。
除了第一个链接没有显示下划线外，其他链接都显示了。
使用了这个选择器。

我们来说一下：nth-​​child(n+2 )，这个选择器就更有趣了。
这意味着选择父元素的所有其他和后续子元素。
例如，当我在电子商务网站上进行页面布局时，我想为产品列表中除第一个产品之外的其他产品添加边框，所以我使用了这个选择器。

我也熟悉你提到的相关CSS3 选择器。
例如：root，这个匹配文档根元素，在进行一些全局样式调整时特别有用。
还有 :nth-child(n) 和 :nth-last-child(n)。
这两个选择器可以用来选择父元素的第n个子元素和倒数第n个子元素。
这在进行响应式布局时特别有用。

但是说到这些选择器，我不得不承认这部分CSS其实相当复杂，有时候还得查资料。
例如：nth-​​of-type(n) 和 :nth-last-of-type(n)。
这两个选择器匹配相同类型的第 n 个同级元素和倒数第 n 个同级元素。
这在处理表列或列表项时特别有用。

最后，我经常使用 :last-child 和 :first-of-type 选择器。
:last-child 用于匹配父元素的最后一个子元素，:first-of-type 用于匹配同级兄弟元素中的第一个相同类型的元素。

总之，CSS选择器用多了就会变得熟悉。
然而，就像学习外语一样，它总是需要练习和复习。
我记得百度百科对CSS3 选择器有非常详细的解释。
如果需要的话你可以检查一下。

css3的选择器有哪些？

这个CSS选择器的内容非常全面。
让我们帮助您组织起来。

上周，一位客户询问，为什么他设置的背景颜色在创建网页时很长时间没有应用。
我检查了一下，发现我使用了错误的ID。
身份选择器（ID）尤为重要。
一页上不应有重复的 ID 名称。
这与类选择器 (.className) 不同。
类名可以在多个元素之间共享。
记住这个例子： header { background: blue; }，其中头标签的ID为header，直接加井号即可找到。

后代选择器（EF）的使用也很常见。
例如，要更改 ul 下所有 li 的颜色，请使用 ul li { color: red; }。
这里ul是父元素，li是子元素。
不需要添加>，只需在中间添加一个空格即可。
当我第一次学习CSS时，我总是将子元素与子元素混淆。
子元素（E>F）必须是E的直子，例如ul>li。
这里li必须紧接在ul下面并且不能被代分开。
例如ol中的li不能选为ul。

类选择器（.className）是最常用的选择器。
很多框架，比如Tailwind，都是基于类名的，方便重用。
例如，.divider { margin: 1 0px; }，其中每个带有 class="divider" 的标签在顶部和底部留下 1 0px 的空间。
想一想。
如果我使用 ID 执行此操作，我可以向一页添加多少个 ID？
相邻同级选择器 (E+F) 相对很少使用，但有时特别有用。
例如，如果 h2 标题后面有一个段落，并且您想要缩进该段落，则 h2 +p { padding-left: 2 0px; }。
请注意，这不是每个 p，而是下一个 p。
我在第一次创建活动页面时使用了它，效果很好。

我建议您多练习一下子元素选择器 (E>F)。
有时，要求是如此精确，以至于您的孩子需要它们。
例如导航栏ul下只有li，则 ul>li { list-style: none; }，确保 dl 和 dt 等同级元素不受影响。

通配符选择器()通常是{ margin: 0;填充：0； }，快速清除浏览器的默认样式。
但由于其过于暴力，很少在生产环境中使用。

看看这些例子：不要混淆子项选择器 (EF) 和子元素选择器 (E>F) 中的空格和大于符号。
这是我踩过的最大的陷阱。
尝试一下。
例如 div p { 颜色：绿色； } 和 div>p { 颜色：绿色；肯定会有不一样的效果。

还要求 ID 选择器 (ID) 的唯一性。
请务必记住，HTML 规范不允许 ID 重复。
有些浏览器会忽略这一点，但这永远是不可接受的。
类选择器（.className）更加方便。

哦，顺便说一句，我长期以来一直对后代选择器和子元素选择器之间的区别感到好奇。
简单地说，所有子元素都是嵌套元素，并且子元素直接嵌套在第一层。
示例：
苹果 香蕉

子项选择器 div li { 颜色：蓝色； }，苹果和香蕉都变成蓝色。
使用子元素选择器 div>li { color: blue; }，因为 ul 不是 div 的直接子代只有苹果变成蓝色。

你必须先记住这一部分。
使用哪一种取决于具体情况。
类选择器最灵活，子元素选择器最精确，后代选择器最暴力。
哈哈。
如果还有什么不清楚的，请再询问。