相同的類，但differt ID，第n個孩子樣式

Question

我一直在試圖解決這一段時間，但我無法找到任何答案在這裏或其他地方。

我發現了一個不錯的CSS手風琴，我想用它作爲我正在構建的網站的菜單。

因此，我試圖在每個頁面上使用不同顏色/背景圖像的不同菜單，並嘗試將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 --> \t 
 

 
<div class="accordion"> 
 
    <section class="accordion-item"> 
 
     <h1>Verein</h1> 
 
     <div class="accordion-item-content"> 
 
      <p>Vorstand</p> 
 
\t \t \t \t \t <p>Trainer</p> 
 
\t \t \t \t \t <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"> 
 

 

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

 
    <section class="accordion-item"> 
 
     <h1>News</h1> 
 
     <div class="accordion-item-content"> 
 
      <p>Vorstand</p> 
 
\t \t \t \t \t <p>Trainer</p> 
 
\t \t \t \t \t <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> 
 
\t \t <section class="accordion-item accordion-item--default"> 
 
     <h1>Galerie</h1> 
 
     <div class="accordion-item-content"> 
 
      <p></p> 
 
     </div> 
 
    </section> 
 
\t \t <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>