CSS为新元素创建选择器

Question

这是一个棘手的问题，我需要选择class="price_code"中的元素，但是仅在data-product-id等于447时才适用。如何使用CSS做到这一点？还是需要使用Javascript解决方案？

<span class="price_code" data-product-id="447">
   <span class="Price-amount amount">
      <span class="Price-currencySymbol">£</span>&nbsp;0
   </span>
</span>

[我知道通常您只需要指定.price_code即可使用CSS选择类，但是我如何指定data-product-id需要447？

Answer 1

您可以使用attribute selector：

.price_code[data-product-id="447"] {
  color: red;
}

<span class="price_code" data-product-id="447">
   <span class="Price-amount amount">
      <span class="Price-currencySymbol">£</span>&nbsp;0
</span>
</span>

<span class="price_code" data-product-id="448">
   <span class="Price-amount amount">
      <span class="Price-currencySymbol">£</span>&nbsp;1
</span>
</span>