为什么我的.service：nth-​​child1无法正常工作？

问题描述

HTML 对于每个服务框，我想更改背景。 但是nth-child()选择器不起作用。

当每个服务类别最终更改为带有各自编号的中殿时，

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

<section class="about-us">
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit,eveniet ipsum,doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit,doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

解决方法

要将每个服务框的背景更改为红色，请从css中删除:nth-child()。

.service {
  background-color: red;
}

nth-child(#)将获取元素的编号（＃）。在此，选择具有匹配项的第一个元素并应用样式。

要更改每种背景，请尝试以下操作：

.service:nth-child(1) {
  background-color: red;
}
.service:nth-child(2) {
  background-color: blue;
}

<section class="about-us">
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit,eveniet ipsum,doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit,doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

,

请记住要从.service中删除背景色。背景颜色应在nth-child属性中定义。

如果您希望它更具模块化，我建议使用偶数/奇数。

.service {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

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

.service:nth-child(odd) {
  background-color: blue;
}

<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>

但是如果您添加不同的背景颜色（例如:nth-child(3n+3)），您也可以尝试，这意味着：每第三个元素：3rd，6th，9th等将应用该背景颜色。

:nth-child(2n+2) =>第二，第四，第六...