CSS每三分之一類型

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) {} 

Answer 2

.location-block:nth-child(3n){ }作品。你可以看到here

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

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

這裏有一個工作示例https://jsfiddle.net/8eh2r06h/

Answer 3

工作正常，我。也許你正在使用IE 8或更早的版本。而且，作爲drosamsaid，也許還可以利用:nth-of type()相反，如果div s爲沒有任何容器他們是獨生子女。

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