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

只要它不是IMG 或 VIDEO 元素（不能是）或具有類custom-class ，您的 css 就會選擇 HTML 元素。

您很可能希望使用*選擇器將 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)  
}