Question

我正在我的网站上实施一个黑暗模式，并尝试以最干净的方式进行（没有锅炉板代码）。

所以我想在CSS中创建.darkmode类，用它定义样式，当用户启用darkmode时，javascript只需将darkmode类添加到<body>。

我怎么能用CSS做这样的事情？

.darkmode {
    .content{
        background-color: black;
    }
    input{
        background-color: black;
    }
}

所以我的问题是，在将此类添加到<body>时，如何让CSS更改页面上的不同元素？

Answer 1

您发布的代码有效SCSS / LESS。但是在普通的CSS中你可以通过使用

来做到这一点

.darkmode .content { /* CSS */ }
.darkmode input { /* CSS */ }

所以是的，你总是必须在每个选择器前指定.darkmode。

Answer 2

假设你有一个选择器，比如

def echo(a=input("Enter a thing: ")):
    return a

def main():
    print("We're going to ask you to enter a thing now,")
    resp = echo()
    print(a)

if __name__ == "__main__":
    main()

您可以使用

覆盖/添加属性

We're going to ask you to enter a thing now,
Enter a thing: foobar
foobar

更加具体，因此规则将覆盖默认规则。

Answer 3

要在普通CSS中实现这一点，您必须使用CSS子选择器;

body.darkmode .content {
  /* Put styles here */
}
body.darkmode input {
  /* Put styles here */
}

基本上，那里的逻辑是：“获取body类darkmode元素并找到它的孩子.content / input” < / p>

使用CSS选择器，有一个空格分隔的两个元素选择器可以找到第一个元素中的所有第二个元素; div p会在所有<p>代码中找到所有<div>个代码。

如何为一个CSS类定义多个样式？

3 个答案: