CSS - 将过滤器应用于除某些类和标签之外的所有类和标签

Question

我正在尝试为一个网站做一个简单的暗模式chrome扩展，我要做的是将过滤器invert(1) hue-rotate(180deg)应用于除图像，视频和其他一些自定义类之外的所有内容。

我试着做以下操作，但它仍然反转所有内容，包括图像，视频和自定义类:

html:not(img):not(video):not(.custom-class) {
filter: invert(1) hue-rotate(180deg)
}

作为一种解决方法，我试图通过再次应用过滤器将图像，视频和其他类的颜色切换为正常颜色，但是颜色移动了一点，并且不完美，所以我想指定哪些类不应用过滤器。

这是我当前的代码:

.p-pageWrapper {
filter: invert(1) hue-rotate(180deg);
}
.p-pageWrapper img,
.p-pageWrapper picture,
.p-pageWrapper video,
.fr-select-color,
.bbMediaWrapper,
.menu,
.menu img,
.tooltip-content,
.tooltip-content img {
filter: invert(1) hue-rotate(180deg);
}

任何帮助都很感激:)提前感谢!

Answer 1

你的css正在选择HTML元素，只要它不是IMG或VIDEO元素(它不能是)或具有custom-class类。

你最有可能寻找应用CSS的所有元素，使用*选择器。您遇到的问题是，如果IMG或VIDEO元素包含在另一个DOM元素中，则会选择父元素并对其应用过滤器。要解决这个问题，您可以使用:has选择器。

从CSS中删除.containter.darkmode(因为这只是为了演示目的)

function toggle(){
document.querySelector(".containter").classList.toggle("darkmode");
}

.containter.darkmode *:not(img):not(:has(img)):not(video):not(:has(video)):not(.custom-class):not(:has(.custom-class)) {
filter: invert(1) hue-rotate(180deg)
}

<button type="button" onclick="toggle()">Toggle Mode</button>
<div class="containter">  
<p>Here is some text</p>
<div>
<span>Here is an image</span>
<div>
<img src="https://place-hold.it/300x500" />
</div>
</div>
</div>

Answer 2

您的选择不对。你可以用这种方法得到你想要的样式。

html {
filter: invert(1) hue-rotate(180deg)
}
// Then revert the selected element style 
img, video, .customer-class {
filter: invert(1) hue-rotate(180deg)  
}