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

我要为第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>

最佳答案

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

有关来自W3C的:nth-of-type()的更多信息：


  :nth-of-type()伪类表示一个元素，该元素具有一个+ b兄弟姐妹，且在文档树中具有相同的扩展元素名称（对于任何零或正整数n），并具有一个父元素。


片段：

.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>