nth-child 在针对一个元素时隐藏了我的所有元素答案

【问题标题】：nth-child is hiding all my elements when targeting onenth-child 在针对一个元素时隐藏了我的所有元素
【发布时间】：2026-01-06 16:00:02
【问题描述】：

不确定我是否使用了错误的选择器，但我的标记看起来像这样

<div class = "col-xs-12 plans__articles">
<div class = "foo">....</div>
<div class = "foo">....</div>
<div class = "foo">....</div>
<div class = "foo">....</div>
</div>

我想选择第一个 foo。

.foo:nth-child(1n){ }

但它会将样式应用于所有这些？

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

指定1n 将选择每个 .foo 元素。这就像说从最初没有选择任何元素的总集合的开头开始，选择在重复通过集合1位置时找到的每个元素。

不指定1n，只需指定1。 CSS 会将其转换为0n+1，这相当于说从总集合中的第一个元素开始，选择在重复通过集合0 位置时找到的每个元素 （当然这意味着除了它开始的那个元素之外没有其他元素被击中）。

.foo:nth-child(1) {
  color: red;
  font-size: 48px;
}

<div class = "col-xs-12 plans__articles">
  <div class = "foo">....</div>
  <div class = "foo">....</div>
  <div class = "foo">....</div>
  <div class = "foo">....</div>
</div>

之后，要选择列表中的第二个，您可以简单地使用.foo:nth-child(2) 等等。

【讨论】：

非常感谢朋友正是我想要的:)

【解决方案2】：

:first-child 或 :first-of-type 接近你想要的。

According to MDN, ":first-child CSS 伪类表示作为其父元素的第一个子元素的任何元素。"

According to CSS-Tricks, "CSS 中的 :first-of-type 选择器允许您定位元素在其容器中的第一次出现。"

实际上，您可能需要做一些事情closer to this：

var target = $('.foo').first();
target.css('border','3px solid red');
target.click(function() {
    // Do whatever you need to do here
    $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

【讨论】：

我忘了说我基本上是想单独选择所有这些，在js中无法完成。
你是什么意思“他们都单独”？你想达到什么目的？
基本上我需要在单击某个特定内容时进行处理，但它使用 ajax 加载内容，因此有点混乱，$(document).on('click','. foo:nth-child(1n)',function(data){ } 我希望每个 div 都使用它，我不能只为每个 div 添加一个新类，因为它都是动态的
@Jake 如果您要添加点击处理程序，您肯定需要在 JS 中执行此操作。 CSS 无法添加点击处理程序。如果您想为元素设置样式，或者在元素之前或之后添加一些文本，那么您可以使用 CSS 来实现。
就 nth-child 而言，这里有一个很好的资源可以非常简单地解释它：nthmaster.com