在js或jquery中更改YouTube的css背景值？

Question

YouTube在其css中有这些行:

:not(.style-scope)[dark], :not(.style-scope)[dark] {
    --yt-spec-brand-background-solid: #212121;
    --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98);
    --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95);
    --yt-spec-general-background-a: #181818;
    --yt-spec-general-background-b: #0f0f0f;
    --yt-spec-general-background-c: #030303;
    ...}

"html: not"对我来说是一个新的表达。如何改变它的背景值与js或jquery?

Answer 1

:not伪选择器表示您希望与不的元素匹配。在括号中有选择器。所以这里的html:not(.style-scope)表示他们希望这些样式只应用于html元素当它没有style-scope

类时这是关于非选择器的MDN文章:https://developer.mozilla.org/en-US/docs/Web/CSS/:not

如果您想通过javascript更改值，您可以更改HTML元素上设置的类。或者，如果您想更改CSS变量，这里有一篇关于如何这样做的文章:https://css-tricks.com/updating-a-css-variable-with-javascript/

虽然基于这个代码示例，我的猜测是他们改变了应该应用的主题的属性。这里他们想要匹配的属性是dark。我假设有一个相应的light属性和样式。

Answer 2

也许你在找这个?

document.querySelector("html:not(.style-scope)");

据我所知，你可以在香草js中使用querySelector来使用所有css选择器

改变背景当HTML元素没有classname .style-scope

document.querySelector("html:not(.style-scope)").style.background = "black";