Question

尝试定位.product-price on-sale以将颜色更改为绿色，但我无法做到。

HTML

<h2 id="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <meta itemprop="priceCurrency" content="USD" />
  <link itemprop="availability" href="http://schema.org/InStock" />
  <span class="product-price on-sale" itemprop="price">$ 1</span>&nbsp;<del class="product-compare-price"></del>
</h2>

CSS

section#buy h2.product-price-on-sale span {
   color:green  !important;
}

Answer 1

参考您的代码，这应该有效：

h2#product-price span.product-price.on-sale{
 color:green;
}

Answer 2

您的CSS选择器错误，因为您的.product-price-on-sale类位于span元素而不是h2。它应该是

section#buy h2 .product-price.on-sale {
    color:green  !important;
}

Answer 3

class="product-price on-sale"
... h2.product-price-on-sale

你把它写成了html中的两个类和css中的一个类（space vs dash）。两个班级选择的CSS为.class1.class2。

您也没有针对正确的标记，正如其他答案所指出的那样。

Answer 4

选择器存在一些问题：

部分#shop h2.product-price-on-sale span

第一部分：

部＃买

假设您有一个标识为buy
的额外包装，这是可以的
```
<section id="buy">
```
第二部分

h2.product价格上出售

错误，因为元素h2的类名不是product-price-on-sale，而是标识为product-price，所以必须在此时：

部分＃买h2 #product-price
第三部分：

span

没关系，因为span元素位于h2内，但如果您想定位具有类product-price和on-sale的元素，则最终选择器必须为：< / p>

部分#shop h2 #product-price span.product-price.on-sale

无法定位特定的css类

4 个答案: