为什么第 n 个子选择器在 css 中不起作用？

Question

我正在使用nth-child选择器为不同的社交添加边框颜色list-group-item。我究竟做错了什么？

    .list-group-item:nth-child(1) {
    	border-right: 3px solid yellow;
    }
    
    .list-group-item:nth-child(2) {
    	border-right: 3px solid red;
    }
    
    .list-group-item:nth-child(3) {
    	border-right: 3px solid green;
    }
    
    .list-group-item:nth-child(4) {
    	border-right: 3px solid blue;
    }
    
    .list-group-item:nth-child(5) {
    	border-right: 3px solid lime;
    }
    
    .list-group-item:nth-child(6) {
    	border-right: 3px solid red;
    }

   <div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6">
    	<div class="views-field views-field-title">
    		<span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span>
    	</div>
    </div>
    
    <div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6">
    	<div class="views-field views-field-title">
    		<span class="field-content list-group-item">Googke<a href="/app/wall/content/"></a></span>
    	</div>
    </div>

Answer 1

nth-child相对于其父级计数，并且.list-group-item在您的示例中是其父级的唯一子级。您可以通过多种方式更改此设置，包括计算此处所示的最外层元素。

.new-class:nth-child(1) .list-group-item  {
    border-right: 3px solid yellow;
}

.new-class:nth-child(2) .list-group-item  {
    border-right: 3px solid red;
}

<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">
    <div class="views-field views-field-title">
        <span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span>
    </div>
</div>

<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">
    <div class="views-field views-field-title">
        <span class="field-content list-group-item">Googke<a href="/app/wall/content/"></a></span>
    </div>
</div>