Css 这个选择器可以缩短吗？

我已经少用CSS一段时间了——主要是为了基础

我有这样一个场景——我试图缩短它，但还没有找到解决方案，但感觉应该是可能的。有什么想法吗

.grid-container
{
    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6
    {
        &:extend(.grid);
    }
}

我想将扩展应用于

.grid container

的所有子级，即标题。我知道我可以删除符号，但是有一个短的代码路径吗？我在想这样的事情（这是行不通的）：

---

选择器已经很短了，我不认为您真的需要进一步缩短它。但如果出于任何原因，您确实希望这样做，您可以尝试以下方法：

h1, h2, h3, h4, h5, h6 {
  .grid-container > &:extend(.grid){};
}

在这里，

&

表示父选择器组中的每个选择器，因此您将获得扩展到

.grid container

下所有标题的

.grid

属性

编译的CSS

.grid,
.grid-continer > h1,
.grid-continer > h2,
.grid-continer > h3,
.grid-continer > h4,
.grid-continer > h5,
.grid-continer > h6 {
  /* rules */
}

---

或者，更简单的方法是为所有标题指定一个公共类，然后只执行以下操作：

.grid-container .common-props-for-all-headings:extend(.grid){};

.grid container.所有标题的常用道具{
宽度：50%；
边框：1件纯色钢蓝色；
利润率：10px自动；
}
h1{
颜色：红色；
}
氢{
颜色：蓝色；
}
h3{
颜色：绿色；
}
h4{
颜色：橙色；
}
h5{
颜色：金色；
}
h6{
颜色：棕色；
}

标题1
标题2
标题3
标题4
标题5
标题6

.grid-container .common-props-for-all-headings:extend(.grid){};