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/