更改所有子元素的背景颜色而不隐藏图像

Question

我正在创建一个可以编辑任何网页格式的应用程序。我正在尝试更改所选 div 的所有子 div 的背景颜色，但我当前的代码使 div 中的图像消失。

.blah *:not(img) {
    background-color: #fffdd0 !important;
}

我尝试使用 :not() 使格式不适用于图像，但它没有改变任何东西。有没有办法使背景颜色不适用于图像或不隐藏图像？

Answer 1

我认为您的 imgs 不是 children 但它们是您的 .blahdiv 的 grandchildren。这就是你的代码不起作用的原因。所以img（在我的例子中是.child）的父级获得了背景，所以背景出现在图像下方，尽管图像没有获得background-color 样式

你可以试试这样的（不知道你的 HTML 结构或者它有多复杂）

div *:not(.child) { background-color: #fffdd0 !important;}
.parent > .child *:not(img){ background-color: red !important;}

<div class="parent">
<p>Child Text</p>
<h1>Child Heading</h1>
     <div class="child">
      <img src="http://placehold.it/350x150">
      <p>grandChild Text</p>
    </div>
</div>