防止元素继承CSS

Question

我想知道是否有办法阻止子元素继承它的父css，例如我有类似的东西：

<div class="MenuSections>
<figure class="MenuIcon">
<img.../>
<figcaption class="MenuCaption">
</figure>
</div>

然后我使用JQuery在单击Section时更改Section和标题颜色：

$(this).find("div").css("background-color", "white");
$(this).find(".MenuCaption").css("color", "Darkgreen");

但是因为我的img是透明的，所以在白色背景上看不到它。

我知道你可以覆盖子元素的css属性，但显然这对img元素不起作用，所以我该怎么办？

注意：

• BG颜色不可协商
• 位置：绝对不能使用
• Img必须是透明的，所以我无法在JQuery上的imgs之间切换

Answer 1

您可以在Jquery中使用CSS选择器。

所以在你的Jquery代码中，你可以做类似的事情。

$(this).find("div *:not(<input element not to be selected>)).css("background-color", "white");

*声明所有元素......所以所有元素都不是你选择的元素。

您可以在此处找到有关sleectors的更多信息：https://api.jquery.com/category/selectors/