第一子女选择器未选择第一个手风琴

Question

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

它没有选择第一个手风琴，并将其设置为显示：块。没有第一个：儿童选择器它可以正常工作，但是所有手风琴身体都开放。但是只能打开第一个。

我在做什么错？

少：

.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;
            }
        }
    }       
  }
} 

Answer 1

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

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

Answer 2

这样做：)

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