Question

我一直试图解决这个问题，但我无法在这里或其他地方找到任何答案。

我发现了一个很好的CSS手风琴，我想用它作为我建造的网站的菜单。

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

这是我的代码：

＆＃13;

/* 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;
 }

＆＃13;

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

＆＃13;

有人有任何想法吗？

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

我个人会改用modifer类

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


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

相同但不同的ID，第n个子样式

1 个答案: