first-child 选择器不选择第一个手风琴体答案

【问题标题】：first-child selector does not select the first accordion-bodyfirst-child 选择器不选择第一个手风琴体
【发布时间】：2018-06-01 22:44:20
【问题描述】：

第一个子选择器 (LESS) 不适用于我。我已经尝试了不同的方法，但没有发现有效。

它不选择第一个手风琴体并将其设置为 display:block。如果没有 first:child 选择器，它可以工作，但是所有手风琴体都是打开的。但应该只打开第一个。

我做错了什么？

少：

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

【问题讨论】：

“不工作”不是问题的技术描述。
它不选择第一个手风琴体并将其设置为显示：块。如果没有第一个：子选择器，它可以工作，但是所有手风琴体都是打开的；）。但应该只打开第一个。
把它放在你的问题和标题中，而不是在 cmets 中。
已经完成 ;)
为我工作jsfiddle.net/sgxp5jv8检查你是否有其他风格

标签： css sass css-selectors less

【解决方案1】：

这样做:)

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

【讨论】：

已经是这样了。但是我在问题中省略了#faq 以节省空间。无论如何都不起作用..
我可以有它部署的实时链接吗？
academyofsports.de/de/fitness/fitness-c-lizenz.html 查看常见问题解答部分。
告诉我您面临的实际问题，我会相应地解决它。
目标是打开第一部手风琴。

【解决方案2】：

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

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

【讨论】：