选择div className CSS中的className

Question

嗨，我有两个不同的html div，包含相同的价格类="uvp uvp- price“。

 <div class="product-detail-price-container">
    <meta itemprop="price" content="119.8">                                                             
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
    <p class="twp-product-detail-price" style="margin-top: -52px;">EK: 29.95 €</p>
 </div>

和

<div class="product-price-info">
    <div class="tw-price-unit"></div>
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
 </div>

现在我只想给在div类product-detail-price-container中的第一个uvp uvp价格类一个填充顶:15 is；

我试过了，但不起作用。

.product-detail-price-container:has(.uvp-price) {
  padding-top: 15px;
}

我做错什么了？谢谢

Answer 1

您可以使用> selector在某个内容中获取一个类：

.product-detail-price-container > .uvp.uvp-price

​

.product-detail-price-container > .uvp.uvp-price {
  border: 1px solid red;
}

<div class="product-detail-price-container">
    <meta itemprop="price" content="119.8">                                                             
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
    <p class="twp-product-detail-price" style="margin-top: -52px;">EK: 29.95 €</p>
 </div>


<div class="product-price-info">
    <div class="tw-price-unit"></div>
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
 </div>

​

Answer 2

您可以使用css直接子选择器轻松完成此操作。只需将类从.product-detail-price-container:has(.uvp-price)替换为.product-detail-price-container > .uvp.uvp-price

最后css：

.product-detail-price-container > .uvp.uvp-price {padding-top: 15px;}

Answer 3

您可以使用: first -child来选择父级的第一个子级，因此：

.product-detail-price-container .uvp.uvp-price:first-child {
    padding-top: 15px;
}

您也可以使用:nth-child(1)来表示：

.product-detail-price-container .uvp.uvp-price:nth-child(1) {
    padding-top: 15px;
}