html - 将背景颜色应用于特定框

Question

我想给第 1、6、7、12、13 和 18 个框着色。有没有一种快速的方法可以在 CSS 中做到这一点

.a {
    height: 50px;
    width: 50px;
    background-color: teal;
    display: inline-block;
    margin: 5px;
}

<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Answer 1

编号。是 6n 和 6n+1 的形式。
因此，添加一个选择器 .a:nth-of-type(6n), .a:nth-of-type(6n + 1)。
为它们添加 background-color: red;。

更多关于 :nth-of-type() 来自 W3C :

The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

片段:

.a{
    height:50px;
    width:50px;
    background-color:teal;
    display:inline-block;
    margin:5px;
}
.a:nth-of-type(6n), .a:nth-of-type(6n + 1){
    background-color: red;
}

<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>