Question

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

我试过这个：

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;
}

P.S - 可以使用动态样式表语言，例如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的背景颜色是什么颜色，如果它是黑色的，你可以发生一些事情，如果它是白色的，你可以进行不同的动作。

基于正文类嵌套CSS

2 个答案: