Bootstrap折叠用css选择第一个和最后一个孩子

时间:2012-06-11 14:03:26

标签: css twitter-bootstrap

如何选择Bootstrap折叠模块的第一个和最后一个孩子的任何建议?我需要先选择“.accordion-heading”,然后才能...

  <div id="accordion2" class="accordion">
<div class="accordion-group">
  <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br />
    Toggle Accordion 1<br />
    </a></div>
  <div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
    <div class="accordion-inner">
      <p>Content 1</p>
    </div>
  </div>
</div>
<div class="accordion-group">
  <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br />
    Toggle Accordion 2<br />
    </a></div>
  <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
    <div class="accordion-inner">
      <p>Content 2</p>
    </div>
  </div>
</div>
<div class="accordion-group">
  <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br />
    Toggle Accordion 3<br />
    </a></div>
  <div id="collapseThree" class="accordion-body collapse" style="height: 0px;">
    <div class="accordion-inner">
      <p>Content 3</p>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:4)

http://jsfiddle.net/PzB8D/1/

您必须先转到accordion-group,然后参考accordion-heading这将是班级accordion-heading中唯一的一个元素:)

.accordion-group:first-child .accordion-heading a{color: #f00;}
.accordion-group:last-child .accordion-heading a{color: #0f0;}