根据我的期望，CSS nth-child 无法正常工作[重复]

Question

我有以下 HTML 代码

<div class="our-services">
    <h1 class="center-text">Our Services</h1>
    <div class="service-box">
        <h3 class="center-text">Service 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>          
</div>

还有一个名为 service-box 的类，我用了 3 次。现在我希望margin-right 对于第三个服务框类应该为零。因此，我使用以下 CSS 代码：

.service-box:nth-child(4) {
    margin-right: 0;
}

它工作正常。

但我的问题是为什么第 n 个值是 4 而不是 3？如果我使用 3 那么它不起作用，为什么？

更新：（不是重复问题）

我的问题是为什么我需要使用 4 而不是 3。正如我在此处看到的示例：https://www.w3schools.com/csSref/tryit.asp?filename=trycss3_nth-child

在此链接中，您可以看到如果要选择第二个 p 元素，则需要使用 p:nth-child(2)，对吗？那么为什么我的代码不接受 3 呢？

Answer 1

这是因为第一个 service-box 实际上是其父级的第二个孩子，center-text 是第一个。删除center-text 并使用.service-box:nth-child(3)。

.service-box:nth-child(3) {
  background-color: red;
}

<div class="our-services">
  <div class="service-box">
    <h3 class="center-text">Service 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
</div>

如果需要，可以使用nth-of-type，更具体

.service-box:nth-of-type(3) {
  background-color: red;
}

<div class="our-services">
  <h1 class="center-text">Our Services</h1>
  <div class="service-box">
    <h3 class="center-text">Service 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
</div>

更多信息here

Answer 2

nth-child 选择器不是 nth-class 选择器。所以它不会根据类或其他属性进行选择。它选择子列表中的第 n 个元素。

在这种情况下，您需要添加(4) 而不是(3)，因为您有<h1 class="center-text">，它是您的service-box 的兄弟。所以所有 service-box + h1 都是同一个父级的子级。

文档很清楚

w3schoolsMDN

:nth-child(n) 选择器匹配其父元素的第 n 个子元素，无论其类型如何。

:nth-child() CSS 伪类根据元素在一组兄弟元素中的位置匹配元素。

举个例子

.my-child:nth-child(3) {
  color:red;
}

<div>
 <span>First child</span>
 <p> Second Child </p>
 <h2 class="my-child"> THird Child</h2>
</div>

所以要使用nth-child 选择器选择my-child，您需要添加 (3)，因为即使它与其他元素不同并且具有特定的类，它也是父元素中的第三个子元素。

话虽如此，没有第 n 类选择器。 在您的特定情况下，您可以使用 nth-of-type(n) 选择器。其中选择元素的类型。因为service-box 是div 元素，而唯一的另一个兄弟元素是h1 元素。使用 nth-of-type(3) 将选择您的第三个section-box。

但是如果你想选择最后一个孩子而不是特定的，你可以使用:last-child

.service-box:nth-of-type(3) {
  background-color:red;
}

<div class="our-services">
    <h1 class="center-text">Our Services</h1>
    <div class="service-box">
        <h3 class="center-text">Service 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>          
</div>