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次。现在，我希望第三个service-box类的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>

更多信息在这里