另一个选择器样式中的CSS选择器

Question

之前我见过以下内容，但在Google上找不到。我想知道它是否是一个框架。这也是一个好习惯吗？

body {
    position:absolute;
    p {
        float:left;
    }
}

基本上，有些选择器嵌套在其他选择器中。我不知道我是否用Google搜索错误的字词，或者是否很难找到，因为这是一个坏主意。所以问题是：这个嵌套的东西是什么，我应该/可以使用它吗？

编辑：

有没有办法可以表现为：

body {
    position:absolute;
    p {
        float:left
    }
}

然后编译为：

body {
    position:absolute;
}
body p {
    position:absolute; 
    float:left;
}

Answer 1

这是CSS的SCSS编程类型。

稍后需要编译器才能编译为CSS代码。

body {
    position:absolute;
    p {
        float:left;
    }
}

将编译为：

body {
    position:absolute; 
}
body p {
    float:left;
}

http://sass-lang.com/了解更多信息。

Answer 2

您正在查看SASS或.scss个文件，而不是CSS。它是preprocessed成为CSS的语言。它是可读性的好习惯，但它不是CSS。目前它不适用于浏览器。

body {
    position:absolute;
    p {
        float:left;
    }
}

处理成为：

body { position:absolute; }
body p { float:left; }

修改

要做出你所描述的内容，你就会这样做：

body {
    position:absolute;
    p {
        position:absolute;
        float:left;
    }
}

处理成为：

body { position:absolute; }
body p { position:absolute; float:left; }

如果您对处理过程中发生的事情感兴趣，可以通过将CSS设置为SCSS来查看Codepen。我已经设置了你在这里工作的东西：

http://codepen.io/EightArmsHQ/pen/zNjpLP

您可以点击下拉菜单中的“查看已编译的CSS”以查看其工作原理。