Question

我概述了item s，它们是这样构建的：

<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 - 类和每个lastinrow - 类。这可能吗？或者我应该使用:nth-child(#)？

如果使用:nth-child是解决方案，我应该使用哪个数字而不是＃如果我想定位第一个和每个第四个？

Answer 1

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

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

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

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

Answer 2

您可以使用adjacent sibling combinator (+)选择下一个元素。然后，您可以将其与:first-child结合使用，以选择第一个.item元素。

.lastinrow + .item,
.item:first-child {
  background: tomato;
  color: #fff;
}

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

如果你想定位每个第3个元素（你的问题是第4个，但我猜你的意思是第3个......），你可以在3n + 1选择器中使用nth-child：

.item:nth-child(3n + 1) {
  background: tomato;
  color: #fff;
}

<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>
<div class="item">...</div>
<div class="item">...</div>
<div class="item lastinrow">...</div>

如果你做实际上想要选择每个第4个元素，你可以使用4n + 1代替。

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

2 个答案: