不是选择器没有分配给 img inside child div

Question

我有一些通用的样式规则应用于我网站上的图像，例如：

border: 5px solid red;

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

但是在页面的 div 中，我不希望 <img> 标签采用这种额外的样式，我正在尝试像这样使用 not 选择器:

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>

更少

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

这个样式最终被应用到所有 <img> 标签，not 选择器似乎被忽略了。我一直在这个代码笔中进行测试：

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

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

Answer 1

使用这个可能会更容易

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

这样，只有 select 的图像是 class 名称的直接后代，而不会 select 其他元素中的图像。

不是选择器没有分配给 img inside child div

not selector not assigning to img inside child div

css

css-selectors

less