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>

Answer 2

将不同的类设置为width 33.33%和width 50%，并在CSS中设置样式

.minWidth{
width:33.33%;
background-color:red;
}
.maxWidth{
width:50%;
background-color:orange;
}

<div class="minWidth">1</div> <!-- width 33.33% -->
<div class="minWidth">2</div> <!-- width 33.33% -->
<div class="minWidth">3</div> <!-- width 33.33% -->
<div class="maxWidth">4</div> <!-- width 50% -->
<div class="maxWidth">5</div> <!-- width 50% -->
<div class="minWidth">6</div> <!-- width 33.33% -->
<div class="minWidth">7</div> <!-- width 33.33% -->
<div class="minWidth">8</div> <!-- width 33.33% -->
<div class="maxWidth"></div> <!-- width 50% -->
<div></div>

需要帮助来确定第n个孩子的价值

2 个答案: