html - 如何添加匹配类属性的一部分的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>

我想定位 .embeded-product6、.embeded-product7 等中的所有 img。我正在尝试如下:

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^=value]
Represents an element with an attribute name of attr whose value is prefixed (preceded) by value.

和

[attr*=value]
Represents an element with an attribute name of attr whose value contains at least one occurrence of value within the string.