0
私はこれをしばらく解決しようとしてきたが、ここで答えが見つからなかった。同じクラスだが異なるID、n番目の子供のスタイル
私は私が構築していますウェブサイトのためのメニューとして使用したい素敵な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>
誰もが任意のアイデアを持っていますか?
こんにちは修飾子クラスを使用しますので、あなたは、あなたの#1 yourid.yourclassを置く必要があります前のメニューのモディファイアクラスですが、nth:childsのスタイルは適用されません。 –
@TorpedoJackson確かにそうです。わかりやすくするために、あなたのCSSにあるグラデーションを削除しました。ここでデモを見つけることができますhttps://jsfiddle.net/Lry01tpv/ –
ok、私はちょうどあなたのコードをコピーし、それは動作します、私は本当にそれが2日前に仕事をしたくない理由は分かりません。ありがとうございました! –