CSS不同顏色的foreach手風琴標題

Question

我使用一個自舉手風琴和我想改變h4標題的顏色爲每個在DOM元素多達4個元素則重複先前的顏色。

.my-platform-title:nth-child(2n+1) { 
 
    color: #1a9e49; 
 
} 
 
.my-platform-title:nth-child(2n) { 
 
    color: #7bc9c8 !important; 
 
} 
 
.my-platform-title:nth-child(3n) { 
 
    color: #fd8d6e !important; 
 
} 
 
.my-platform-title:nth-child(4n) { 
 
    color: #bf6da6 !important; 
 
}

<div class="panel-heading my-panel-heading" role="tab" id="platform1"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 1 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform<2"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse<2" aria-expanded="false" aria-controls="platform-collapse<2"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 2 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform3"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 3 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform4"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 4 
 
     </a> 
 
    </h4> 
 
</div>

正在發生的事情是，首先顏色應用和其他被忽略。

Answer 1

我建議像這樣每個標題定義不同的其他類，然後單獨樣式類：

所有的

<h4 class="panel-title my-panel-title my-platform-title my-platform-title-1">Title 1</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-2">Title 2</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-3">Title 3</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-4">Title 4</h4> 

Answer 2

首先，你的選擇是錯誤的。我的意思是他們可以在這種情況下爲你服務，但一般而言，2n+1意味着每個奇怪的孩子，3n意味着每三個孩子等等。

相反，你應該寫樸素簡單的數字：第n個孩子（1） - 選擇的第一個孩子，...

如果這是行不通的，無論出於何種原因，並考慮到你只需要改變顏色，我建議你使用更加友好，清晰的方式添加自定義類的顏色，就像這樣：

.color-green { 
 
    color: #1a9e49; 
 
} 
 

 
.color-turquoise { 
 
    color: #7bc9c8 !important; 
 
} 
 

 
.color-orange { 
 
    color: #fd8d6e !important; 
 
} 
 

 
.color-purple { 
 
    color: #bf6da6 !important; 
 
}

<h4 class="panel-title my-panel-title my-platform-title color-green">Title 1</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-turquoise">Title 2</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-orange">Title 3</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-purple">Title 4</h4>

Answer 3

nth-child是元素選擇，因此竟被d是孩子與父母相比 - 在你的情況下，h4.my-platform-title永遠是div的第一個孩子。

你需要做的是將n-child移動到父div上（如果它們是它們父級的唯一孩子 - 例如下面的例子，我在你的標題周圍添加了一個容器）。

您還需要顏色的錨，而不是H4

.panel-heading:nth-child(1n) .my-platform-title a { 
 
    color: #1a9e49; 
 
} 
 
.panel-heading:nth-child(2n) .my-platform-title a { 
 
    color: #7bc9c8; 
 
} 
 
.panel-heading:nth-child(3n) .my-platform-title a { 
 
    color: #fd8d6e; 
 
} 
 
.panel-heading:nth-child(4n) .my-platform-title a { 
 
    color: #bf6da6; 
 
}

<div class="container"> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform1"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 1 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform2"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse2" aria-expanded="false" aria-controls="platform-collapse2"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 2 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform3"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 3 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform4"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 4 
 
     </a> 
 
    </h4> 
 
    </div> 
 
</div>

Answer 4

我猜你想樣式的鏈接的顏色，而不是標題本身：

.my-panel-heading:nth-child(1) a { 
    color: #1a9e49; 
} 
.my-panel-heading:nth-child(2) a { 
    color: #7bc9c8; 
} 
.my-panel-heading:nth-child(3) a { 
    color: #fd8d6e; 
} 
.my-panel-heading:nth-child(4) a { 
    color: #bf6da6; 
} 

小提琴：https://jsfiddle.net/4jc7vr9r/1/