html - CSS中有更短的方法来做到这一点吗？

Question

我有大量的 CSS 代码，我可能有更好的编写方式。

例如，我想H1在 HTML 页面上非常特定的位置将标签设为红色。

.format-seven.blue #page-content h1,
.format-seven.green #page-content h1{
  color: red;
}

我本可以使用：

h1{
color: red;
}

但是，在这种情况下，我真的需要所有".format-seven.blue #page-content"部分的特异性。".format-seven.green #page-content"

注意“绿色”和“蓝色”部分。

如果我能做这样的事情会很好：

.format-seven.[green|blue] #page-content h1{
  color: red;
}

有这样的事吗？

标签： htmlcss

Answer 1

不，不幸的是，香草 CSS 中没有。如果您担心需要编写多少代码，大型 CSS 预处理器拥有用于编写样式表生成脚本的工具

这是一个很棒的 CSS 预处理器 (SASS) 的链接