css - 控制两个不同类的代码

Question

我有以下 HTML 代码。我的 tax-details CSS 是:

.products-grid .tax-details {
    margin-top: -15px;
}

我需要为 tax-details 提供一个单独的 css 选择器，该选择器具有 regular-price 类。我尝试了以下方法:

.products-grid .regular-price .tax-details {
    margin-top: 0px;
}

但这行不通。有人可以帮帮我吗？

<ul class="products-grid first odd">
   <li class="item first"> <a class="product-image" title="Navy Frotteejacke" href="urll"><img width="180" height="180" alt="Navy Frotteejacke" src="url"></a>
     <h2 class="product-name"><a title="Navy Frotteejacke" href="url">Navy Frotteejacke</a></h2>
     <div class="price-box">
       <span id="product-price-167" class="regular-price">
       <span class="price">9,00&nbsp;€</span></span>
     </div>
     <span class="tax-details">inkl. MwSt., zzgl. <a href=url">Versandkosten</a></span>
   </li>
</ul>

Answer 1

如果我理解正确，你正在尝试更改 .tax-details 的 CSS，但它不是 .regular-price 的子元素，因此这将不起作用.

你试过在你的 CSS 后面添加 !important; 吗？

.tax-details {
    margin-top: 0px!important;
}

或者如果你想用一个代码控制两个类(如你的标题所示)，你可以使用这个:

.regular-price, .tax-details {
    margin-top: 0px;
}