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作为目标.embeded-product6，.embeded-product7等等。我正在尝试如下：

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

但它不起作用。有什么想法吗？

Answer 1

那是因为你有多个班级，而第一堂课不是embeded-product-*

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

记住CSS Selectors如何运作

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

和

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

Answer 2

我们可以简单地使用以下样式来实现样式

.embeded-product6 img{background:red;}

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

2 个答案: