时间戳

首页 > 解决方案 > 为什么我的 .service:nth-child(1) is not 不工作？

html - 为什么我的 .service:nth-child(1) is not 不工作？

问题描述

我要更改背景的每个服务框的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, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

标签： htmlcsscss-selectors

解决方案

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

.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, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

推荐阅读