如何从重复ID（css）缩短css代码

如何缩短css代码

HTML:

<div id="root">
    <p>Green</p>
    <h1>Blue</h1>
    <h3 class="brown">Brown</h3>
</div>

#root p{ color:green; }

#root h1{ color:blue; }

#root .brown{ color:brown; }

我知道上面的代码很好用。

但我可能只是想是否有任何方法可以缩短上面的css代码。我试过这些（下图），但没有成功

#root{
  p{ color:green; },
  h1{ color:blue; },
  .brown{ color:brown; }
}

---

谁能给我一个演示（代码笔）如何做。需要您的帮助，先生们。

事实上，您可以在SASS中执行几乎完全相同的操作，就像您尝试在CSS中缩短它一样，只是不使用逗号

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

这里有到官方指南>

的链接，您可以按如下方式嵌套css，外部是父选择器，在我们的例子中是

#root

，内部是花括号，我们可以声明

#root

的子选择器

用于将sass文件编译为css

SCSS

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

#root p {
  color: green;
}
#root h1 {
  color: blue;
}
#root .brown {
  color: brown;
}

编译的CSS

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

#root p {
  color: green;
}
#root h1 {
  color: blue;
}
#root .brown {
  color: brown;
}

---

我的回答和你的问题一样具有描述性。 给你：

p{color:#0f0}h1{color:#00f}.brown{color:brown}

---

)()

例如，您可以通过SASS实现这一点

#root {
  p {color: green;}
  & h1 {color: blue;} 
  & h3 {color: brown;}
}

您可以在此处进行测试，以查看其工作情况：

转到此处了解如何在项目中安装它：

这是css中的外观，但是使用SASS

---

与其他注释中提到的一样，非常适合编写嵌套的CSS声明。请注意，它是一个预处理器，因此最终的CSS代码将被编译。我猜这个sass代码的结果是：

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

将导致您的示例作为输出

---

之所以这么说，是因为知道最终文件不一定更小是很重要的

你试过的是一个SASS/无语法的css，你做不到。您应该使用sass或更少的css预处理器。@Temaniaf如果您能为我使用sass/更少的方式，先生。抱歉我的无知。@BearNithi抱歉我的无知（刚刚开始学习css）。先生，你能帮我做些什么吗？你需要阅读并理解它。。。这并不像做那样简单。你开始学习，所以继续学习