css - 基于 body 类的 CSS 嵌套

Question

我的网站有多个主题，例如浅色或深色主题。这通过一个类应用于 body。如果身体有黑暗，我想应用某些造型。

我试过这个：

body.dark {
    .sidebar {
        background-color: #444;
    }
    .intro {
        background-color: #CCC;
    }
    /* etc */
}

但是，没有应用任何样式。这种情况的正确方法是什么？

我可以使用 .sidebar.dark，但是当前的深色 CSS 文件位于 .intro、.sidebar 等中。

Answer 1

纯 CSS 中没有这样的嵌套/作用域。你必须body.dark一遍又一遍地写。

body.dark .sidebar {
    background-color: #444;
}
body.dark .intro {
    background-color: #CCC;
}

• PS - 在LESS和SASS等动态样式表语言中是可能的

Answer 2

如果没有像SCSS或LESS这样的预处理器，你不能直接在 CSS 上使用比较函数。所以在这种情况下，我会推荐简单的 Javascript。最快的方法是使用一些 JQuery 魔法。

您可以使用以下行来实现此目的，例如：

$(document).ready(function(){
   if($('#div').attr('background-color') === 'black'){
      // do something if its black
   } else if($(#div).attr('background-color') === 'white'){
      // do something if its white
   }
});

基本上它是在验证你的#div 的背景颜色是什么颜色，如果它是黑色的，你可以做一些事情，如果它是白色的，你可以进行不同的操作。