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;
}
但它不起作用。有什么想法吗?
最佳答案
那是因为你有多个类,第一个类不是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.
关于html - 如何添加匹配类属性的一部分的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49027215/