如何制作一组样式以指向特定元素内的类

Question

.css文件中有n种样式。

我正在使用.Net MVC应用程序

假设：

.a{}
.b{}
.c{}

我的html就像

<div id='blockA'> 
--- nested div containing classes a , b, c
</div>

<div id='blockB'> 
--- nested div containing classes a , b, c
</div>

如果我希望这些样式适用于blockA。我可以这样做

#blockA .a{}
#blockA .b{}
#blockA .c{}

还有其他方法可以为一组样式指定它吗？

#blockA
{
.a{}
.b{}
.c{}
}

Answer 1

CSS不允许嵌套规则-这是SASS和LESS之类的CSS预处理器的功能。

两者都允许：

#blockA {
  .a { color: blue; }
  .b { color: red; }
  .c { color: green; }
}

如果仅需要使用本机CSS来实现相同的结果，则需要按以下方式进行操作（这正是那些预处理程序将代码编译为的方式）：

#blockA .a {
  color: blue;
}

#blockA .b {
  color: red;
}

#blockA .c {
  color: green;
}

如果.a .b和.c的规则相同：

#blockA {
  .a, .b, .c { color: black; }
}

被编译为

#blockA .a,
#blockA .b,
#blockA .c {
  color: black;
}

请注意，由于任何预处理器都必须编译为本机CSS，所以它们都不允许您执行本机CSS无法实现的工作。

Answer 2

是的，您应该使用SASS，LESS之类的CSS预处理器

然后，您可以像在.scss / .less文件中提到的那样进行定义。

#blockA
{
.a{}
.b{}
.c{}
}