Question

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

<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){ }

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

Answer 1

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

不要指定1n，只需指定1即可。 CSS会将其转换为0n+1，这相当于从总集合中的第一个元素开始说明，选择在重复步进 0 位置时找到的每个元素（自然这意味着没有其他元素与它开始的元素分开）。

＆＃13;

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

＆＃13;

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

＆＃13;

之后，要选择列表中的第二个，您只需使用.foo:nth-child(2)，依此类推。

Answer 2

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

According to MDN，＆＃34;：first-child CSS伪类表示任何元素，它是其父元素的第一个子元素。＆＃34;

According to CSS-Tricks，＆＃34; CSS中的第一个类型选择器允许您定位其容器中元素的第一个出现位置。＆＃34;

实际上，您可能需要做一些事情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);
});

nth-child在定位一个元素时隐藏了所有元素

2 个答案: