Question

我在网站上的图片中应用了一些通用的样式规则，例如：

border: 5px solid red;

然后我想以不同方式设置一些<img>标签，

然而，在页面中的div中，我不希望<img>标记获得额外的样式，我尝试使用not选择器，如下所示：< / p>

HTML

<div class="no-overflow">
    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg">

  <div class="comment-ctrl">
    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg">
  </div>
</div>

LESS

.no-overflow:not(.comment-ctrl) {
 img { border: 5px solid green; }
}

此样式最终会应用于所有<img>标记，not选择器似乎会被忽略。我一直在测试这个codepen：

http://codepen.io/JoeHastings/pen/MYrVWK

是否有一些CSS语法可以在不改变DOM本身的情况下完成这项工作？

Answer 1

使用此

可能更容易

.no-overflow > img {
    border: 5px solid green;
}

这样它只会选择作为班级名称直接后代的图像，并且不会在其他元素中选择图像。

不选择器不分配给子div内的img

1 个答案: