简体   繁体   English

Bootstrap 3 Accordion - 在嵌套 div 中以 class 名称定位第一个 div

[英]Bootstrap 3 Accordion - target first div with class name within nested divs

This question pertains to Bootstrap 3 accordion.这个问题与 Bootstrap 3 手风琴有关。 I'm trying to remove to top border of only the first panel-heading.我正在尝试仅删除第一个面板标题的顶部边框。 Obviously:first-child, nth-child(1), :first-of type is not working as the panel-heading is situated inside a panel div.显然:first-child, nth-child(1), :first-of type 不起作用,因为面板标题位于面板 div 内。

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
         <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#0" aria-expanded="false">Headline-1</a>
         </h4>
     </div>
     <div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
       <div class="panel-body">
         <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
       </div>
     </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="false">Headline-2</a>
        </h4>
      </div>
      <div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#2" aria-expanded="false">Headline-3</a></h4>
      </div>
      <div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        </div>
      </div>
    </div>

CSS: CSS:

    .panel-heading{
      border-top: 1px solid #e3e3e3;
      border-bottom: none;
      border-radius: 0;
     }

Nevermind, blank moment没关系,空白时刻

just had to target the .panel:first-child.panel-heading只需要针对.panel:first-child.panel-heading

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM