Question

我想要像这样定义CSS。可能吗？

#container-id-1
{
   .the_content {           
        font-size: 20px;
        text-align: left;           
    }

    .the_footer {
      text-align:center;
    }
}

#container-id-2
{
    .the_content {          
        font-size: 17px;
        text-align: right;          

    }

    .the_footer {
        text-align:center;
    }
}

我找到了这个资源但是因为它出现了可能有新的发展：

Group css tags within a single div

Answer 1

你不能用普通的CSS做到这一点，你可以使用像LESS这样的动态风格语言。

请参阅此示例：LESS Scopes

Answer 2

在直接CSS中执行此操作的唯一方法是连接名称，例如：

#div1.class1 { //Div with id 'div1' and class 'class1'}
#div1.class2 {}
#div2.class1 {}
#div2.class2 {}

请注意，如果目标同时包含ID #div1和类class1

如果你想做子元素，那么在id和class之间放一个空格

#div1 .class1 { //Child element of div '#div1' with class 'class1'}
#div1 .class2 {}
#div2 .class1 {}
#div2 .class2 {}

所以要澄清一下，第一个例子适用于这样的div：

<div id="div1" class="class1"></div>

第二个例子适用于这样的div：

<div id="div1">
    <div class="class1"></div> <-----It applies to this one
</div>

根据您的问题，我认为您需要第二种方法。在您的上下文中查看我的示例 the fiddle 。

在Element Conditional中定义CSS规则

2 个答案:

JSFiddle Example