CSS - 上下文使用样式？

Question

我认为这是可能的，但每个人都告诉我它不是。

我想在我的css文件中使用上下文样式，如：

div#foo {
 h2 {
   color: #F42
 }
 p.bar {
   font-size: 12px
 }
}

因此只有id为foo的div中的h2和p.bar才会被设置样式。或者这只适用于LESS和其他类似的库？

谢谢＆amp;亲切的问候， Jurik

Answer 1

使用标准css是不可能的，需要将两个类设置为：

div#foo h2 {}
div#foo p.bar {}

Answer 2

这对纯CSS来说是不可能的，这就是为什么你应该使用SCSS或LESS（我建议使用SASS / SCSS），它们是CSS超集

LESS / SASS-SCSS允许您轻松编写动态CSS，请查看this比较

查看COMPASS这是我建议您使用SASS / SCSS的主要原因

Answer 3

这是可能的，但如下：

div#foo h2 {
    /* styles go here */
}

div#foo p.bar {
    /* styles go here */
}

Answer 4

您上面的内容只是略有改动的版本：

div#foo h2 { color: #F42; }
div#foo p.bar { font-size: 12px }

我真的没有看到任何收获。

Answer 5

Less让你做的就是你所描述的，以及其他一些很酷的东西，比如在css等中使用变量。

当然，一旦你让它编译，它就会把它变成以前答案中建议的有效CSS。还是值得一看恕我直言。

Answer 6

是的，但是分开......

div#foo h2 {
   color: #F42
 }
div#foo p.bar {
   font-size: 12px
 }

但我想稍微改变一下：

#foo h2 {
   color: #F42
 }
#foo p.bar {
   font-size: 12px
 }

您正在使用ID，因此您无需先说任何内容，因为ID是唯一的

Answer 7

使用默认的CSS技术是不可能的。

但是，通过使用sass和less，有可能。

您问题中的代码适用于上述两个库。