css - 需要帮助来确定第 n 个 child 的值(value)

Question

如何将元素 1、2、3 设置为 width: 33.33% 并将 4、5 设置为 width: 50 % 等等使用 nth-child 选择器 ?

像这样:

<div></div> <!-- width 33.33% -->
<div></div> <!-- width 33.33% -->
<div></div> <!-- width 33.33% -->
<div></div> <!-- width 50% -->
<div></div> <!-- width 50% -->
<div></div> <!-- width 33.33% -->
<div></div> <!-- width 33.33% -->
<div></div> <!-- width 33.33% -->
<div></div> <!-- width 50% -->
<div></div> <!-- width 50% -->
<!-- and so on -->

Answer 1

在这里!当心如果你的 div 的父级包含其他标签，它会完全搞乱元素的计数方式!

.container * {
  border: 1px solid black;
  height: 10px;
}

.container :nth-child(5n+1), .container :nth-child(5n+2), .container :nth-child(5n+3) {
  background-color: green;
  width: 33.33%;
}

.container :nth-child(5n+4), .container :nth-child(5n) {
  background-color: red;
  width: 50%;
}

<div class="container">
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 50% -->
  <div></div> <!-- width 50% -->
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 33.33% -->
  <div></div> <!-- width 50% -->
  <div></div> <!-- width 50% -->
</div>