Html 应用边框顶部效果

我很难达到此处所示的预期效果：

基本上对手风琴按钮应用边框顶部效果，但第一个按钮除外。以下是html代码：

<div class="cat">
    <h2>Accordion</h2>

    <button class="accordion">Section 1</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion">Section 2</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion">Section 3</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div> 

---

使用

:first of type

代替

:first child

：first child

选择器用于选择指定的选择器，前提是它是其父级的第一个子级-这不是您的情况，因为容器中的第一个子级（

.cat

）是

h2

元素

---

:first of type

匹配父级中的第一个子级，但属于特定类型。

您必须使用

：first of type

而不是

：first child

：

.cat按钮：非（：类型的第一个）{
边框顶部：纯色1px黑色；
}

.cat按钮：非（：类型的第一个）{
边框顶部：纯色1px黑色；
}

手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作