Question

我的应用中有这个 HTML 结构：

<div className="checkout-txt-row ">
    <p className="checkout-txt">Total</p>
</div>
<div className="checkout-txt-row ">
    <p className="checkout-txt"> SHIPPING</p>
</div>
<div className="checkout-txt-row ">
    <p className="checkout-txt">VAT (INCLUDED)</p>
</div>
<div className="checkout-txt-row ">
    <p className="checkout-txt">GRAND TOTAL</p>
</div>

我只是希望第三个项目的边距为 24 像素，最后一个项目的边距为 32 像素，所以我这样做了：

.checkout-txt-row {
    display: flex

    &:nth-of-type(3){
        margin-bottom: 24px;
    }

    &:last-of-type {
        margin-bottom: 32px;
    }

    .checkout-txt {
        opacity: 0.5;
        margin-bottom: 8px;
        text-transform: uppercase;
    }
}

但它不起作用。 nth-of-type 对 2nd item 和 last-of-type 的影响根本不起作用。为什么这不起作用，我该如何解决？

（顺便说一句，在此之前，我在没有 checkout-txt-row 包装器的情况下做了完全相同的事情，在 nth-of-type 上只有 checkout-txt 并且效果很好）

编辑我之前没有提到这一点，但我使用的是 react，所以 className 不是问题

Answer 1

只需将 className 更改为 class，CSS 就会起作用:)

Answer 2

“类”不是“类名”

<div class="checkout-txt-row ">
    <p class="checkout-txt">Total</p>
</div>
<div class="checkout-txt-row ">
    <p class="checkout-txt"> SHIPPING</p>
</div>
<div class="checkout-txt-row ">
    <p class="checkout-txt">VAT (INCLUDED)</p>
</div>
<div class="checkout-txt-row ">
    <p class="checkout-txt">GRAND TOTAL</p>
</div>

为什么 nth-of-type 不能正常工作

2 个答案: