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

我无法让 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;}

最佳答案

很明显，所有颜色都相同，因为 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>

关于css - 在动态 React 表上使用 nth-child css，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46045657/