我想设置第二个孩子与类活动的特殊规则，但我不能目标它。 我有10个项目，其中很少有活跃的类。 我需要针对具有活动类的第二个孩子。
有没有办法使用nth-child并组合两个类？
null
.container {
border: 2px solid red;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
column-gap: 3rem;
}
.item {
background-color: pink;
}
.item.active {
font-size: 2rem;
}
// Works when passed 5
.item.active:nth-child(2) {
background-color: yellow;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item active">4</div>
<div class="item active">5</div>
<div class="item active">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>null
注意:目前只有Safari支持以下功能
使用:nth-child并指定.active要求。
如果您没有使用Safari，下面的代码片段将不起作用。
null
.container {
display: flex;
}
.item {
background-color: pink;
}
.item.active {
font-size: 2rem;
}
.item:nth-child(2 of .active) {
background-color: blue;
}<div class="container">
<div class="item">1</div>
<div class="item active">2</div>
<div class="item active">3</div>
<div class="item active">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>