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

Question

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

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

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

Answer 1

我认为您的img不是children，而是grandchildren div的.blah。这就是你的代码无效的原因。因此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>