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

【问题标题】：Using nth-child css on dynamic React table在动态 React 表上使用 nth-child css
【发布时间】：2018-02-13 04:47:39
【问题描述】：

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

我正在尝试按三个顺序交替“left-inner-container”的背景颜色，但我始终只获得一种颜色。

这是我的 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;}

【问题讨论】：

标签： css reactjs css-selectors

【解决方案1】：

只需更新以下 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;
  background-color: #ff5e39;
}

.left-inner-container:nth-child(2) {background-color: #00d2d1;}
.left-inner-container:nth-child(3) {background-color: #ffffff;}

【讨论】：

【解决方案2】：

很明显你得到的所有颜色都是一样的，因为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>

【讨论】：

现在我觉得自己很蠢。误解了选择器如何工作的基本原理，并且不知道您可以在 nth-child 声明之后按类进行选择，因此我也必须缺少核心 CSS 语法概念。是时候做一些阅读了。此解决方案有效，非常感谢您的帮助！