Question

我正在使用 bootstrap 手风琴，我想将 DOM 中每个元素的h4标题的颜色更改为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

首先，您的选择器是错误的。我的意思是他们可以在这种情况下为你服务，但总的来说2n+1意味着每个奇怪的孩子，3n意味着每三个孩子，等等。

相反，你应该写简单的简单数字:: nth-child（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 2

nth-child是一个元素选择器，因此它与父母相比是孩子 - 在你的情况下，h4.my-platform-title始终是div的第一个孩子。

你需要做的是将第n个孩子移到父div上（如果他们是他们父母的唯一孩子 - 在下面的示例中，我在你的标题周围添加了一个容器）。

您还需要为锚点而不是h4

着色

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

我建议为每个标题定义不同的附加类，然后单独设置类的样式：

<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 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/

CSS不同颜色的foreach手风琴标题

4 个答案: