Question

在考虑another problem of mine的解决方案时，我试图了解CSS元素可以从其他元素继承到哪些扩展。具体来说，具有以下定义

.dark {
  background-color: black;
}
.light {
  background-color: white
}

是否可以通过编程方式（可能是JS）将其中一个类分配给:root元素？

Answer 1

使用JS可以轻松完成。

选择元素：

const root = document.querySelector(':root')

为其分配课程：
```
root.classList.add('light')
```

一起：

const root = document.querySelector(':root')
root.classList.add('light')

或者，最好不要使用两个类，而最好使用:not()选择器：

:root:not(.dark){
  background-color: white;
}
:root.dark{
  background-color: black;
}

Answer 2

我会为此使用（并已经使用）CSS变量。

:root {
  --background-color: black;
}

.background {
  background-color: var(--background-color);
}

然后使用javascript更改CSS变量。

Answer 3

在HTML中，<?php date_default_timezone_set('America/Sao_Paulo'); /** * */ Class Usuario { private $pdo; public $msgErro = ""; public function conectar($nome, $host, $usuario, $senha){ global $pdo; try { $pdo = new PDO("mysql:dbname=".name.";host=".$host,$usuario,$senha); } catch (PDOException $e) { $msgErro = $e->getMessage(); } } public function cadastrar($nome, $email, $senha){ global $pdo; //verificar se ele ja esta cadastrado $sql = $pdo->prepare("SELECT id_usuario FROM usuarios WHERE email = :e"); $sql->bindValue(":e",$email); $sql->execute(); if($sql->rowCount() > 0) { return false; //Ela ja esta cadastrada } else{ //Caso nao, pode Cadastrar $sql = $pdo->prepare("INSERT INTO usuarios (nome, email, senha) VALUES (:n, :e, :s)"); $sql->bindValue(":n",$nome); $sql->bindValue(":e",$email); $sql->bindValue(":s",md5($senha)); $sql->execute(); return true; } } public function logar($email, $senha){ global $pdo; //verificar se o email e senha estao cadastrado $sql = $pdo->prepare("SELECT id_usuario FROM usuario WHERE email = :e AND senha = :s"); $sql->bindValue(":e",$email); $sql->bindValue(":s",$senha); $sql->execute(); if($sql->rowCount() > 0) { //entrar no sistema (sessao) $dado = $sql->fetch(); session_start(); $_SESSION['id_usuario'] = $dado['id_usuario']; return true;//cadastrado e vai entrar } else{ return false; //nao foi possivel logar } } } ?>等同于:root（doc）：

在HTML中，：root表示元素，并且与选择器html，但其特异性更高。

可能的解决方案是将类应用于<html>：

<html>

document.getElementsByTagName("html")[0].classList.add('dark')

.dark {
  background-color: red;
}

可以给：root分配一个类吗？

3 个答案: