第一个儿童选择器不选择第一个手风琴体

Posted 2021-04-18

第一个孩子选择器（LESS）对我不起作用。我已经尝试过不同的方法，但发现没有办法。

它没有选择第一个手风琴体并将其设置为显示：块。没有第一个：子选择器它可以工作，但随后所有的手风琴身体都打开了。但是只应该打开第一个。

我究竟做错了什么？

减：

.accordion.product {
    &:first-child{
        .accordion-body{
            display: block !important;
        }
    }
}

html：

<div id="faq">
  <div class="accordion product">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 1               
        </strong>
      </div>
      <div class="accordion-body schedule">
        <p>Answer 1</p>                
      </div>
    </div>
  </div>
  <div class="accordion product">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule">
        <p>Answer 2</p>                
      </div>
    </div>
  </div>
</div>

---

更新（完整代码）

HTML：

<div id="faq">
    <?php if($faq->numRows && $faqCategory->numRows): 
        $faqCategoryResult = $faqCategory->fetchAllAssoc();
        $faqResult = $faq->fetchAllAssoc();

        // get the category id
        foreach($faqCategoryResult AS $category): 
            $categoryId = ($category['title'] == $entry->field('titel')->value() ? $category['id'] : '');

            if($categoryId): ?>
                <h2 class="sectionheading">Häufig gestellte Fragen (FAQ)</h2>
            <?php endif; 

            // get the faq's matching the category id above
            foreach($faqResult AS $faq): 
                if($faq['pid'] == $categoryId): ?>
                    <div class="accordion product" itemscope itemtype="http://schema.org/Question">
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <strong itemprop="name">
                                    <?= $faq['question'] ?>
                                </strong>
                            </div>
                            <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
                                <?= $faq['answer'] ?>
                            </div>
                        </div>
                    </div>
                <?php endif;
            endforeach;

        endforeach; 
    endif ?>
</div>

减：

section#container{
  #faq{
    .accordion.product {
        &:first-child{
            .accordion-body{
                display: block !important;
            }
        }
    }       
  }
} 

答案

在这种情况下，使用第一个子选择器不起作用，因为要定位的元素不是其父元素的第一个子元素。 h2是。

请使用first-of-type选择器：https://codepen.io/yinken/pen/EoZoBN

另一答案

这样做:)

 #faq {    
    .accordion.product {
        &:first-child{
            .accordion-body{
                display: block !important;
             }
         }
     }
 }