嵌套css规则 [英] nested css rules

问题描述

前一段时间我看到一个css文件的例子，其中css规则/选择器以嵌套方式指定，例如。像这样：

Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:

div.a {
  color: red;
  div.b {
    font-weight: bold;
  }
}

我不知道我在哪里看到在一个SO问题），或者它是否正确如上所示。

I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.

我的问题：上述CSS是否正确/有效？

My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?

推荐答案

这是一个标准的方法来指定CSS规则，或者这是一个浏览器相关的hack？但它是使用 Sass / SCSS 或 LESS ，我相信其他CSS扩展，它扩展到这样的东西（这是有效的CSS），然后提供给浏览器使用：

That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}

这篇关于嵌套css规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！