Question

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

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

我需要为tax-details创建一个具有类regular-price的单独css选择器。我尝试了以下方法：

.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

具有常规价格等级的税务明细

=＆GT; tax-details没有与您的HTML示例相关联的regular-price类。

选择器：.products-grid .regular-price .tax-details

适用于这样的结构：

products-grid
    regular-price
       tax-details

<强> BUT

您当前的HTML具有以下结构：

products-grid
    regular-price
    tax-details  //not a regular-price's child

所以不要指望它以这种方式工作。

优化结构以匹配CSS声明，或更改CSS选择器。

---------来自您的评论如下：----------

你可能没有改变整个结构，但是添加一个类我希望是的：

<span class="tax-details regular-price">inkl. MwSt., zzgl. <a href=url">Versandkosten</a></span>

和CSS成为：

.products-grid .tax-details.regular-price { //note the union (without space) between tax and regular
    margin-top: 0px;
}

有关详情：http://www.bennadel.com/blog/680-Defining-A-CSS-Selector-That-Requires-A-Multi-Class-Union.htm

Answer 2

如果我理解正确，您正在尝试更改.tax-details的CSS，但它不是.regular-price的子项，因此无效。

您是否尝试在CSS后面添加!important;：

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

或者，如果您尝试使用一个代码控制两个类（如标题所示），您可以使用它：

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

用于控制两个不同类的代码

2 个答案: