Question

它不重复！我有这样的结构：

    <ul>
        <li class="item">
         <div>
            <span>Option</span>
         </div>
       </li>
       <li class="item">
        <div>
          <span>Option<</span>
         </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
      </li>
      <li class="item">
       <div>
        <span>Option<</span>
       </div>
      </li>
      <li class="item">
       <div>
        <span>Option<</span>
       </div>
      </li>
<li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>
       <li class="item">
        <div>
         <span>Option<</span>
        </div>
       </li>        

   </ul>

scss正在关注：

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 50px;
    margin-left: -5px;
    max-height: stretch;
    li {
            font-size: 14px;
    cursor: pointer;
    margin-bottom: 3px;
    padding: 5px 0 5px 5px;
    margin-right: 10px;
    }
  }

我需要使前4个列表项具有背景色，然后使下一个不具有背景色，然后再对下4个元素重复相同的操作，则列表元素的数量可以是动态的，在某些屏幕上，我将仅使用背景。如何使用CSS在奇数行中选择4个元素？

Answer 1

没有办法真正选择一个范围并重复，因此要制定多个规则

ul li:nth-child(8n),
ul li:nth-child(8n-1),
ul li:nth-child(8n-2),
ul li:nth-child(8n-3) {
  background-color: lime;
  color: blue
}

ul li {
  color: green
}

ul li:nth-child(8n-7),
ul li:nth-child(8n-6),
ul li:nth-child(8n-5),
ul li:nth-child(8n-4) {
  background-color: orange;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

Answer 2

最简单的解决方案是添加不同的类以添加不同的样式。示例：

.blackLi {
  background-color: black;
  color: white;
}
.grayLi {
  background-color: gray;
  color: white;
}

然后将它们相应地添加到您的li标签中。对于动态元素，您还可以使用.classlist.add（）方法以编程方式添加它们

是否可以使用CSS选择前4个元素？

2 个答案: