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>

我试图改变＆＃34;左内容器＆＃34;的背景颜色。在三个星球的序列中，但我总是在所有这些中只得到一种颜色。

这是我的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演示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

只需更新以下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;}

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

2 个答案: