如何添加匹配class属性的一部分的css

Question

HTML：

<div class="single-item item6  embeded-product6 demo">
    <figure class="imghvr-shutter-out-diag-2 embeded-product-conrner-4">
        <img src="/sites/all/themes/smart_sinepulse/img/smart_home_products/tele-health.png" style="
        width: 154px;
        ">
        <figcaption>
            <h3>Tele Health</h3>
        </figcaption> <a href="#tele-health" aria-controls="profile" role="tab" data-toggle="tab"></a>
    </figure>
</div>

我想将目标中的所有img作为目标.embedded-product6，.embedded-product 7等等。我正在尝试如下：

div[class^="embeded-product"] img{
    background:red; 
}

但它没有用。任何的想法？

Answer 1

那是因为你有多个类，第一个类不是embeded-product-*

如果你想实现这一目标，你需要使用[class*="embeded-product"]

div[class*="embeded-product"] img {
  background: red;
}

<div class="single-item item6  embeded-product6 demo">
  <figure class="imghvr-shutter-out-diag-2 embeded-product-conrner-4">
    <img src="/sites/all/themes/smart_sinepulse/img/smart_home_products/tele-health.png">
    <figcaption>
      <h3>Tele Health</h3>
    </figcaption>
    <a href="#tele-health" aria-controls="profile" role="tab" data-toggle="tab"></a>
  </figure>
</div>

记住CSS Selectors的工作原理

[ATTR ^ =值] 表示属性名称为attr的元素，其值以值为前缀（前置）。

和

[ATTR * =值] 表示属性名称为attr的元素，其值包含字符串中至少出现一次值。

Answer 2

我们可以简单地使用下面的风格来实现风格

.embeded-product6 img{background:red;}