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>

更多信息here

Answer 2

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

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

文档非常清晰

w3schools MDN

：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>

要使用my-child选择器选择nth-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>

CSS nth-child无法根据我的期望工作

2 个答案: