在动态 React 表上使用 nth-child css

Question

我无法让nth-child或nth-of-type选择器在 div 列表中生效。

我正在 React 应用程序中工作，并且有一个代表集合中单个项目的组件，该组件呈现以下 HTML 结构：

<div className="link-row">
  <div className="link-row-header-container">
    <div className="header-name"></div>
    <div className="header-info"></div>
  </div>
  <div className="link-container">
    <div className="left-inner-container"> //this is the container i'm trying to select  
    </div>
    <div className="right-inner-container">
    </div>
  </div>
  <div className="link-row-footer-container">
    <span> footer stuff </span>
  </div>
</div>

我在外部组件中有一个函数，将上述组件映射到数据集合上，并将它们放入单个数据中，<div>如下所示：

<div> {linkList} </div>

我试图以三个序列交替“左内容器”的背景颜色，但我始终只在所有这些颜色中获得单一颜色。

这是我的 CSS：

.left-inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #450037;
}

.left-inner-container:nth-of-type(3n+1) {background-color: #ff5e39;}
.left-inner-container:nth-of-type(3n+2) {background-color: #00d2d1;}
.left-inner-container:nth-of-type(3n+3) {background-color: #ffffff;}

Answer 1

很明显，您得到的所有颜色都是相同的，因为left-inner-container始终是其父容器first-child的颜色。

我建议将您的link-row容器作为nth-of-type选择器的目标。请参阅下面的简化 html-CSS 演示：

.link-row {
  border-bottom: 1px solid red;
  background: #ddd;
}

.left-inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #450037;
}

.link-row:nth-of-type(3n+1) .left-inner-container {
  background-color: #ff5e39;
}

.link-row:nth-of-type(3n+2) .left-inner-container {
  background-color: #00d2d1;
}

.link-row:nth-of-type(3n+3) .left-inner-container {
  background-color: #ffffff;
}

<div class="wrapper">

  <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>

    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
  
</div>