文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用nth-child()样式列表

问如何使用nth-child()样式列表
EN

Stack Overflow用户

提问于 2022-10-20 09:41:43

回答 1查看 27关注 0票数 3

我有下面的代码。

html

    export default function App() {
      const data = [
        { id: 1, title: "1" },
        { id: 2, title: "2" },
        { id: 3, title: "3" },
        { id: 4, title: "4" },
        { id: 5, title: "5" },
        { id: 6, title: "6" },
        { id: 7, title: "7" },
        { id: 8, title: "8" },
        { id: 9, title: "9" },
        { id: 10, title: "10" },
        { id: 11, title: "11" }
      ];
      return (
        <div className="App">
          {data.map((el) => (
            <div key={el.id} className="block">
              {el.title}
            </div>
          ))}
        </div>
      );
    }

css

    .App {
      display: grid;
      grid-template-columns: 50% 50%;
    }

    .block {
      border: 1px solid black;
      height: 50px;
    }

    .block:nth-child(3n + 1) {
      background-color: red;
    }

    .block:nth-child(3n + 2) {
      background-color: green;
    }

    .block:nth-child(3n + 3) {
      background-color: blue;
    }

我正在尝试给我的.block类以下样式。但这不管用。我试过(3n + 1)的红色(3n + 2)代表绿色和(3n + 3)代表蓝色。另外，我试着用:first-child()做了一些红色的事情，但是它没有起作用。

如图所示，请帮助我达到预期的效果。谢谢

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-20 09:49:50

你可以分组思考：

第一个和最后一个元素是红色的(4n+1和4n)。
第二个元素是绿色(4n+2)。
第三个元素是蓝色(4n+3)。

.App {
  display: grid;
  grid-template-columns: 50% 50%;
}

.block {
  border: 1px solid black;
  height: 50px;
}

.block:nth-child(4n),
.block:nth-child(4n+1) {
  background-color: red;
}

.block:nth-child(4n+2) {
  background-color: green;
}

.block:nth-child(4n+3) {
  background-color: blue;
}

<div class="App">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
  <div class="block">9</div>
  <div class="block">10</div>
  <div class="block">11</div>
  <div class="block">12</div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74137700

复制

相似问题

问如何使用nth-child()样式列表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用nth-child()样式列表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用nth-child()样式列表
EN