我正在尝试使用 HTML 和 CSS 创建手风琴，但遇到了一些问题：
演示：http: //jsfiddle.net/MMFBz/
问题 1 - 每个标签都应该有一个1px dashed #C5B7A6边框顶部，除了第一个。当我创建一个伪元素: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;}