CSS中:first-of-type选择器失效问题求助

为什么:first-of-type不生效？ #

:first-of-type是基于元素类型（如div、p）的选择器，它匹配的是父元素下第一个该类型的元素，而非第一个拥有指定类名的元素。

你的结构中，.elements的第一个子元素是.addElement（div类型），后续动态添加的.elements__newElement同样是div类型。因此第一个.elements__newElement并不是父元素下的第一个div，所以&:first-of-type无法选中它。

解决方案 #

方案1：相邻兄弟选择器（兼容性好）

利用相邻兄弟选择器+，直接选中紧跟在.addElement后的第一个.elements__newElement：

.elements {
    // 原有样式
    &__newElement {
        display: inline-block;
        margin-top:10px;
        margin-bottom:10px;
        padding: 10px;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;

        // 替换原有的&:first-of-type
        .addElement + & {
            margin-top: 0;
        }
    }
}

方案2：CSS4类匹配选择器（现代浏览器支持）

使用:nth-child(1 of .类名)直接匹配父元素下第一个目标类元素，不受前面其他元素影响：

.elements {
    // 原有样式
    &__newElement {
        display: inline-block;
        margin-top:10px;
        margin-bottom:10px;
        padding: 10px;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;

        &:nth-child(1 of &) {
            margin-top: 0;
        }
    }
}

方案3：Flex布局优化（更简洁）

既然父元素用了flex-direction: column，可以用gap统一管理间距，避免手动设置margin：

.elements {
    width:70%;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    gap: 10px; // 新增：设置子元素之间的间距

    .addElement {
        width:280px;
        text-align: center;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;
        margin-bottom: 15px; // 调整：原有25px减去gap的10px，保证和原效果一致
        &:hover {
            cursor: pointer;
        }
    }
    &__newElement {
        display: inline-block;
        padding: 10px;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;
        // 移除margin-top和margin-bottom，由gap控制间距
    }
}

内容的提问来源于stack exchange，提问作者Marco