在css课程后定位第一个孩子

Question

我对items 有一个概述,它是这样构建的:

<div class="item">...</div>
<div class="item">...</div>
<div class="item lastinrow">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item lastinrow">...</div>

我希望每次传递item一个item-class时都会定位第一个类和每个类lastinrow.这可能吗？或者我应该使用:nth-child(#)？

如果使用:nth-child是解决方案,我应该使用什么数量而不是#如果我想要定位第一个和每个第四个？

Answer 1

这将选择.item第一个子项或紧跟.lastinrow项目的所有元素:

.item:first-child,
.lastinrow + .item {
}

为了完整起见,如果你想选择.item从1开始的第3个子元素,你会写:

.item:nth-child(3n + 1) {
}

.item:first-child,
.lastinrow + .item {
    background: #FC0;
}
.item:nth-child(3n + 1) {
    color: #F00;
}

<div class="item">First item</div>
<div class="item">...</div>
<div class="item lastinrow">...</div>
<div class="item">Item following last-in-row</div>
<div class="item">...</div>
<div class="item lastinrow">...</div>