Question

鉴于以下标记，如何在CSS中选择每三个“位置块”？谢谢！我试过了.location-block:nth-child(3n){}，但这没效果。

<div class="location-block">
Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block"> <!-- Want to Select This -->
 Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block"> <!-- Want to Select This -->
 Lorem Ipsum Dolor
</div>

Answer 1

.location-block:nth-child(3n){ }有效。您可以看到here

您也可以使用:nth-of-type

.location-block:nth-of-type(3n) { 
}

这里有一个工作示例https://jsfiddle.net/8eh2r06h/

Answer 2

对我来说很好。也许你正在使用IE 8或更早版本。而且，正如drosam said，如果:nth-of type()不是他们所在的任何容器中的唯一子项，则可以使用div。

.location-block:nth-child(3n){color:red}
.location-block:nth-of-type(3n){background:yellow}

<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>

Answer 3

.location-block:nth-child(3n) {}

Answer 4

您好，如果您知道您的标记（HTML）将全部 div ，则您不需要使用clases。

div:nth-of-type(3n){background:tomato}

<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>

谢谢T04435。

CSS每三种类型

4 个答案: