将背景颜色应用于特定框

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

The nos。具有 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的任何零或正整数值，并且具有父元素。

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;