CSS 在 CodePen 中工作，但当我将它复制到我的编辑器时却不工作

Question

这是我从 CodePen 获得的一小段代码。不幸的是，当我复制并尝试使用它时，这似乎不起作用。有什么我想念的吗？如何让这段代码在我的编辑器和浏览器中运行？

ul {
     margin: 0;
     padding: 0;

     li {
        list-style: none;
     }
}

另外，这和

一样吗？

ul {
     margin: 0;
     padding: 0;
}
ul li {
    list-style: none;
 }

P.S。 : 这只是一个很简单的例子。真实代码有很多这样的 "nested" 选择器。（最多 5 "nested" 选择器）

Answer 1

您问题中的第一个代码片段（带有那些嵌套选择器）不是 CSS。

它可能像第二个代码段中的 CSS 一样工作，但要这样做，您需要使用 SASS/LESS/SCSS/etc 等预处理器，它们使用简化语法将 CSS 呈现为应该是。

环顾四周，您会发现您提到的 CodePen 使用的是什么预处理器。

Answer 2

1. 最有可能是因为在第一个示例中是 SASS 类型的 CSS，它会在 CodePen 中自动编译，但它不是，在您的 IDE,
2. 第二个示例是纯 CSS，因此如果您希望这些代码段开始工作，您需要删除所有嵌套属性，或者将 SASS 编译为 CSS
3. 或附上您要复制的完整代码段