Question

我正在构建一个tumblr主题。我有一个选项，用户可以选择布局样式（一列或两列）。我不确定如何在CSS上处理它。我尝试使用他选择的内容添加一个类，但是它不起作用，我不确定我是否可以在另一个类中创建一个类。

基本上我希望Content div类定义Container div类。

<meta name="select:Layout" content="ClassOne" title="One Column">
<meta name="select:Layout" content="ClassTwo" title="Two Columns">

CSS

    .ClassOne{ 
  @media (max-width:480px){
    .container{
      width: 250px;
      float: left;
    }
  }
  @media (min-width: 480px){
    .container{
      width: 300px;
      float: left;
    }
  }
}

.ClassTwo{ 
  @media (max-width:480px){
    .container{
      width: 500px;
      float: left;
    }
  }
  @media (min-width: 480px){
    .container, .container .photo img, .photoset img, .link, .quote, .text, .chat, .audio, .video, .video iframe, .answer{
      width: 600px;
      float: left;
    }
  }
}

HTML

<div id="content" class="masthead {select:Layout}">
    <div class="container">
    </div>
</div>

Answer 1

你不能在纯CSS中做到这一点。你的CSS应该是这样的：

  @media (max-width:480px){
    .ClassTwo .container{
      width: 500px;
      float: left;
    }
  }
  @media (min-width: 480px){
    .ClassTwo .container, .ClassTwo .container .ClassTwo .photo img, 
    .ClassTwo .photoset img, .ClassTwo .link, .ClassTwo .quote, 
    .ClassTwo .text, .ClassTwo .chat, .ClassTwo .ClassTwo .audio, 
    .ClassTwo .video, .ClassTwo .video iframe, .ClassTwo .answer{
      width: 600px;
      float: left;
    }
  }

你可以在SCSS中使用嵌套，但是你需要一个SCSS编译器在SCSS源代码发送到浏览器之前生成扁平化的CSS。 SCSS主要是一种编写可维护CSS文件的方法，但浏览器不能直接使用它们。

请参阅：http://sass-lang.com/关于SASS和SCSS。它们基本相同，但SCSS具有更多CSS语法。
有关用PHP编写的SCSS编译器，请参阅：http://leafo.net/scssphp/。我曾经多次使用过这款产品，效果非常好。
有JavaScript SCSS编译器，但这不是可行的方法。浏览器必须在每个视图上编译SCSS，这将极大地减慢页面的加载速度。

Answer 2

您的意思是，用户选择class2或theme2并将该类名添加到内容中吗？

你可以用Jquery做到这一点，这是我在JS Bin上做的一个例子，也许这对你有帮助吗？ http://jsbin.com/cawuvapicage

下面是使用的Jquery，html非常简单。 theme1和2是单击的链接，具体取决于您单击的链接，它将正确的类名添加到容器div。

 $(function() {
     $( ".theme1" ).click(function() {
        $( ".container" ).toggleClass("style1");
        $( ".container" ).removeClass("style2");
      });
    $( ".theme2" ).click(function() {
        $( ".container" ).toggleClass("style2");
        $( ".container" ).removeClass("style1");
});

}）;

CSS - 另一个类里面的类

2 个答案: