无法定位特定 css class

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

你的 CSS 选择器是错误的，因为你的 .product-price-on-sale class 在你的 span 元素上而不是你的 h2。应该是

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

Answer 2

参考您的代码，这应该可行：

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

Answer 3

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

您在 html 中将其写为两个 class，在 css 中将其写为一个 class（space 与破折号）。两个 class 选择的 css 是 .class1.class2.

正如其他答案所指出的那样，您也没有定位正确的标签。

Answer 4

您的选择器存在一些问题：

section#buy h2.product-price-on-sale span

第一部分：

section#buy

没关系，假设你有一个额外的包装器，id 为 buy
```
<section id="buy">
```
第二部分

h2.product-price-on-sale

错误，因为元素 h2 没有 product-price-on-sale 的 class 名称，而是有一个 ID product-price，此时必须是：

section#buy h2#product-price
第三部分：

span

没关系，因为 span 元素在 h2 内，但是如果您想要使用 class product-price 和 on-sale 作为目标最终选择器必须是：

section#buy h2#product-price span.product-price.on-sale

无法定位特定 css class

unable to target specific css class

html

css

css-selectors