css - 同一个类不同ID，第n个子样式

Question

我已经尝试解决这个问题一段时间了，但在这里或其他地方找不到任何答案。

我找到了一个不错的 CSS Accordion ，我想将其用作我正在构建的网站的菜单。

所以我尝试在每个页面上使用不同颜色/背景图像的不同菜单，并尝试使用 ID 作为选择器。但它没有应用不同的样式。

这是我的代码:

/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content{
    height: 8em;
}

.accordion-item-content,
.accordion:hover .accordion-item-content,
.accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

/* Aesthetic */


.accordion {
    padding: 0;
    margin: 0 auto;
    width: 70%;
    font-family: "PT Sans" sans-serif
}

.accordion .accordion-item {
  background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  border-bottom: 1px solid #666;
  padding: 1em;
  color: #eee;
}

.accordion h1 {
  text-shadow: -2px -1px 15px rgba(0, 0, 0, 0.96);
  margin: 0;
}

.accordion p{
  margin-left: 5%;
}

.accordion .accordion-item:nth-child(1) {
  /*background-color: hsl(200, 80%, 60%);*/


  background:
      /* top, transparent red */
      linear-gradient(
        rgba(0, 121, 63, 0.8),
        rgba(0, 121, 63, 0.6)
      ),
      /* your image */
      url(graphics/sportheim.png);


/*   background-image: url(graphics/sportheim.png);
  background-size: cover;
 background-image: linear-gradient(-90deg, hsl(200, 80%, 60%), hsl(200, 80%, 45%) 2em, hsl(200, 80%, 60%)); */

}

.accordion .accordion-item:nth-child(2) {

  background:
  linear-gradient(
    rgba(255, 242, 0, 0.8),
    rgba(255, 242, 0, 0.7)
  ),
  /* your image */
  url(graphics/menu_mitglied.png);
  background-size: cover;


  /*
  //Original
  background-color: hsl(280, 60%, 45%);
  background-image: linear-gradient(-90deg, hsl(280, 80%, 60%), hsl(280, 60%, 45%) 2em, hsl(280, 80%, 60%));
  */
}

.accordion .accordion-item:nth-child(3) {

  background:
  linear-gradient(
    rgba(59, 103, 177, 0.8),
    rgba(59, 103, 177, 0.7)
  ),
  /* your image */
  url(graphics/menu_anfahrt.png);
  background-size: cover;


  /*
//Original
  background-color: hsl(40, 80%, 40%);
  background-image: linear-gradient(-90deg, hsl(40, 80%, 60%), hsl(40, 80%, 45%) 2em, hsl(40, 80%, 60%));*/
}

.accordion .accordion-item:nth-child(4) {

  background:
  linear-gradient(
    rgba(255, 242, 0, 0.8),
    rgba(255, 242, 0, 0.7)
  ),
  /* your image */
  url(graphics/menu_mitglied.png);
  background-size: cover;



  /*background-color: hsl(80, 40%, 40%);
  background-image: linear-gradient(-90deg, hsl(80, 80%, 40%), hsl(80, 80%, 35%) 2em, hsl(80, 80%, 40%));
  */
}


#gesundheit .accordion .accordion-item:nth-child(1){
  background-color: blue;
 }

#gesundheit .accordion .accordion-item:nth-child(2){
  background-color: red;
 }
#gesundheit .accordion .accordion-item:nth-child(3){
  background-color: green;
 }
#gesundheit .accordion .accordion-item:nth-child(4){
  background-color: yellow;
 }

<!-- MENU FRONTPAGE -->	

<div class="accordion">
    <section class="accordion-item">
        <h1>Verein</h1>
        <div class="accordion-item-content">
          <p>Vorstand</p>
					<p>Trainer</p>
					<p>Impressum</p>
        </div>
    </section>
    <section class="accordion-item">
        <h1>Mitglied werden</h1>
        <div class="accordion-item-content">
          <p>Content for section 2</p>
        </div>
    </section>
    <section  class="accordion-item">
        <h1>Anfahrt</h1>
        <div class="accordion-item-content">
          <p>Content for section 3</p>
          <p>This is my default state.</p>
        </div>
    </section>
    <section class="accordion-item accordion-item--default">
        <h1>Social Media</h1>
        <div class="accordion-item-content">
          <p></p>
        </div>
    </section>
</div>

<p></p>

<!-- MENU GESUNDHEIT -->

<div id="secondary" class="<?php if ( is_page('Gesundheit') ) : ?> col-xs-12 widget-area <?php else : ?> hidden-xl-down <?php endif ?>" role="navigation">


	<div id="accordion" class="accordion">

    <section class="accordion-item">
        <h1>News</h1>
        <div class="accordion-item-content">
          <p>Vorstand</p>
					<p>Trainer</p>
					<p>Impressum</p>
        </div>
    </section>
    <section class="accordion-item">
        <h1>Trainer</h1>
        <div class="accordion-item-content">
          <p>Content for section 2</p>
        </div>
    </section>
    <section  class="accordion-item">
        <h1>Kursangebot</h1>
        <div class="accordion-item-content">
          <p>Content for section 3</p>
          <p>This is my default state.</p>
        </div>
    </section>
    <section class="accordion-item accordion-item--default">
        <h1>Kursplan</h1>
        <div class="accordion-item-content">
          <p></p>
        </div>
    </section>
		<section class="accordion-item accordion-item--default">
        <h1>Galerie</h1>
        <div class="accordion-item-content">
          <p></p>
        </div>
    </section>
		<section class="accordion-item accordion-item--default">
        <h1>Kontakt</h1>
        <div class="accordion-item-content">
          <p></p>
        </div>
    </section>

</div>

</div>

有人知道吗？

Answer 1

你应该把你的#yourid.yourclass，所以在你的情况下是

#gesundheit.accordion .accordion-item:nth-child(1) {
  background-color: blue;
}

#gesundheit.accordion .accordion-item:nth-child(2) {
  background-color: red;
}

#gesundheit.accordion .accordion-item:nth-child(3) {
  background-color: green;
}

#gesundheit.accordion .accordion-item:nth-child(4) {
  background-color: yellow;
}

就我个人而言，我会改用修饰符类

.accordion.accordion-gesundheit .accordion-item:nth-child(1) {
  background-color: blue;
}


<div class="accordion accordion-gesundheit">...</div>