我正在尝试使用HTML和CSS创建手风琴，但我遇到了一些问题：
演示： http://jsfiddle.net/MMFBz/
问题1 - 每个标签应该有一个1px dashed #C5B7A6 border-top，第一个除外。当我创建:first-of-type或:first-child的伪元素时，它什么都不做......
问题2 - 选中/打开标签后，标题颜色必须为#EF7C4D。
问题3 - 每篇文章中的文本应该有一个opacity: 0，然后在打开时设置为1.当我将其设置为0时，这样可以正常工作，但是在打开文本后将文本淡化不会工作
问题4 - 每篇文章都应自动设置height，由内容量决定。如果我删除height: 150px;我松开了过渡效果（逐渐向下滑动打开）。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" checked />
<label for="ac-1">Label One</label>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius arcu lectus, sit amet tempus nibh. Integer quis eros sed dui varius luctus in non ipsum. Proin congue, nibh nec rhoncus fermentum, ipsum magna imperdiet libero, id viverra lorem nisi ac ante. Integer eu tortor ac nunc pulvinar fermentum vel vulputate enim. Curabitur id diam urna. Vestibulum venenatis malesuada mauris, rhoncus ullamcorper tortor dictum vel. Fusce luctus metus id felis ultricies lacinia. Praesent luctus varius augue, id consectetur eros iaculis sit amet. Fusce tempor dolor ut leo tempus sit amet ornare eros cursus. Nulla dui dolor, posuere vel vestibulum ac, sollicitudin sed enim. Mauris ac vestibulum enim. Vivamus nulla nulla, tincidunt ut elementum quis, posuere eget velit. Nullam placerat blandit cursus. </p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Label Two</label>
<article>
<p>Vestibulum viverra, nisl in aliquet malesuada, ipsum tellus cursus nibh, et pellentesque lorem quam eu arcu. Vivamus ultricies gravida aliquam. Maecenas quis est lectus, in laoreet mi. Pellentesque eleifend nunc ac mi tempus laoreet. Maecenas sit amet nisi massa, ac laoreet arcu. Curabitur accumsan auctor adipiscing. Curabitur lacinia molestie nisi, sit amet sollicitudin neque aliquet eu. In lacus nisi, porttitor nec euismod sed, hendrerit sed eros. Integer eu felis velit, a vulputate mauris. Etiam dui magna, convallis vel tristique non, pharetra eu erat. Duis suscipit lectus quis elit volutpat sit amet semper elit dapibus. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Label Three</label>
<article>
<p>Maecenas vitae mattis dolor. Cras sit amet elit ac mi facilisis iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sollicitudin scelerisque justo eu bibendum. Nam ac odio tellus. Suspendisse tristique lectus vel mi tristique tristique. Morbi sed auctor libero. Aliquam sagittis vestibulum felis, ut varius tellus venenatis vitae. Donec ac nisi sem, et imperdiet nulla. Mauris vel nulla justo, in volutpat libero. Fusce vestibulum rutrum nibh vel scelerisque. Curabitur viverra libero nec enim adipiscing et venenatis ante auctor.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Label Four</label>
<article>
<p>Phasellus lobortis sapien et risus imperdiet tempor. Integer vestibulum ligula a velit eleifend rutrum. Nam erat magna, lacinia quis porta tempus, vulputate ac odio. Praesent vel mi vel purus malesuada convallis. Sed tincidunt euismod tortor. Mauris leo nibh, semper nec sodales sit amet, faucibus vel nunc. Morbi quis nibh quis diam semper blandit. Fusce vitae viverra sem. Phasellus tempor nunc in urna eleifend fermentum varius felis pretium. Mauris convallis felis vel massa vehicula ut ullamcorper est imperdiet. In orci leo, ullamcorper in varius a, aliquam id libero. Nam urna metus, dignissim sit amet egestas eu, sollicitudin ac lorem. Fusce ac libero sem, nec porttitor dui.</p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Label Five</label>
<article>
<p>Duis lectus tortor, malesuada vel viverra in, aliquam nec metus. Cras euismod enim et enim lacinia eleifend. Nunc ornare, mauris eleifend scelerisque suscipit, metus lorem rhoncus est, in porttitor mi ipsum at erat. Phasellus fermentum elit et purus tincidunt vel bibendum enim tincidunt. Etiam posuere risus id dolor volutpat nec auctor risus aliquet. Sed ac erat porttitor odio interdum venenatis et at arcu. Aenean quis massa ut sem tincidunt suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pellentesque, lorem vitae ultrices posuere, elit nibh tincidunt nibh, nec lacinia diam sapien eu mauris. Sed euismod risus non libero imperdiet in fermentum elit vehicula. Vestibulum orci mi, sodales eu pellentesque at, ornare eu ipsum. Phasellus eget dolor ipsum, varius rhoncus turpis. Donec consectetur convallis ornare. </p>
</article>
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Label Six</label>
<article>
<p>Nullam hendrerit varius risus in vestibulum. Integer mattis gravida arcu, ut bibendum leo sagittis eget. In consectetur lorem adipiscing sem tincidunt placerat. Vestibulum sit amet lacus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet justo dui, id consectetur ipsum. Ut hendrerit convallis nunc, eu mollis nulla ornare dapibus. Proin quam nulla, mollis eget laoreet ut, blandit id velit. Curabitur a odio risus, a cursus tortor. Aliquam erat volutpat. Vivamus eros odio, semper vel volutpat vel, commodo in eros. Sed porttitor malesuada nisi sed mattis. Etiam feugiat consequat rutrum. Sed in mi nunc, ornare tristique erat. Vestibulum a ligula dui. </p>
</article>
</div>
<div>
<input id="ac-7" name="accordion-1" type="checkbox" />
<label for="ac-7">Label Seven</label>
<article>
<p>Nullam elit ipsum, blandit nec dictum hendrerit, rutrum vitae ante. Sed accumsan porttitor placerat. Nullam feugiat congue rutrum. Morbi at quam eu mauris egestas dictum eget id odio. Maecenas sed turpis non nunc dapibus placerat. Vestibulum mattis auctor risus, in fringilla erat venenatis quis. Fusce posuere congue massa, sed semper odio iaculis porttitor.</p>
</article>
</div>
<div>
<input id="ac-8" name="accordion-1" type="checkbox" />
<label for="ac-8">label Eight</label>
<article>
<p>Integer quis lectus nec tellus egestas volutpat commodo bibendum massa. Phasellus iaculis iaculis magna, et semper nunc mattis quis. Praesent dictum, quam id sodales ornare, erat nibh dapibus nibh, eget porttitor dui sem et erat. Praesent lobortis vulputate nulla, nec sagittis justo ultrices eu. Sed at consectetur lacus. Cras molestie dictum lorem, ut tincidunt magna malesuada in. Praesent posuere mi eget justo mattis hendrerit. Proin vitae quam justo. Donec consequat mauris sed dui eleifend vitae dictum risus faucibus. Curabitur gravida consequat mi, ut hendrerit metus laoreet sed. Cras in justo quis neque hendrerit cursus ac vel eros. Sed pretium, lectus sed tempus lacinia, ipsum sapien dapibus elit, quis sodales nisl tortor quis sem. Donec aliquam nibh eget tellus ornare porta. Phasellus bibendum diam et mi pulvinar pellentesque.</p>
</article>
</div>
</section> <!-- .ac-container -->
</div> <!-- #container -->
</body>
</html>
CSS
body {
background: #202024;
color: #FFF;
font: .75em Arial, Helvetica, sans-serif;
}
#container {
width: 500px;
margin: 0 auto;
}
#container label {
font: 1.75em 'Oswald', Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
color: #FFF;
padding: 5px 0;
position: relative;
z-index: 20;
display: block;
cursor: pointer;
border-top: 1px dashed #C5B7A6; /* ------- Problem 1 ------- */
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}
.ac-container label:first-of-type,
.ac-container label:first-child {
border: none; /* ------- Problem 1 ------- */
}
.ac-container label:hover {color: #EF7C4D;}
.ac-container label:checked {
color: #EF7C4D; /* ------- Problem 2 ------- */
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 0;
top: 7px;
background: transparent url(http://i.stack.imgur.com/l3caj.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {background-image: url(http://i.stack.imgur.com/CnUMt.png);}
.ac-container input {display: none;}
.ac-container article{
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.ac-container article p {
padding: 5px;
/* opacity: 0; /* ------- Problem 3 ------- */
}
.ac-container input:checked ~ article {
height: 150px; /* ------- Problem 4 ------- */
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}
.ac-container input:checked {height: auto;}
答案 0 :(得分：1)
问题1：因为label不是ac-container的子项。如果你在div上放置了顶部边框，那么它就会起作用。
问题2：选择器应为.ac-container input[type='checkbox']:checked + label，因为标签不会自行检查。此外，标签的颜色将被默认颜色覆盖，因此请尝试使用!important查看其工作原理。
问题3：我这样说：
.ac-container input:checked ~ article {
opacity: 1;
-webkit-transition: opacity,height 0.5s,0.5s ease-in-out;
-moz-transition: opacity,height 0.5s,0.5s ease-in-out;
-o-transition: opacity,height 0.5s,0.5s ease-in-out;
-ms-transition: opacity,height 0.5s,0.5s ease-in-out;
transition: opacity,height 0.5s,0.5s ease-in-out;
}
.ac-container article{
opacity:0;
-webkit-transition: opacity,height 0.3s,0.3s ease-in-out;
-moz-transition: opacity,height 0.3s,0.3s ease-in-out;
-o-transition: opacity,height 0.3s,0.3s ease-in-out;
-ms-transition: opacity,height 0.3s,0.3s ease-in-out;
transition: opacity,height 0.3s,0.3s ease-in-out;
}
问题4：似乎你需要指定高度，除非你使用javascript：similar question