这个选择器可以缩短吗？

Question

我使用 Less CSS 已经有一段时间了——主要是为了基础。

我有这种情况 - 我试图缩短它但尚未找到解决方案，但感觉应该是可能的。有什么想法吗？

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

我想将扩展应用于 .grid-container 的所有 children，即 headers。我知道我可以删除符号，但是有没有短代码路径？我在想这样的事情（行不通）：

& > h1,h2,h3,h4,h5,h6 {}

Answer 1

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

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

此处，& 表示 parent 选择器组中的每个选择器，因此您将获得 .grid 的属性扩展到 .grid-container 下的所有标题。

已编译CSS

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

或者，更简单的方法是为所有标题分配一个共同的 class，然后执行以下操作：

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

.grid-container .common-props-for-all-headings{
  width: 50%;
  border: 1px solid steelblue;
  margin: 10px auto;
}
h1{
  color: red;
}
h2{
  color: blue;
}
h3{
  color: green;
}
h4{
  color: orange;
}
h5{
  color: gold;
}
h6{
  color: brown;
}

<div class='grid-container'>
  <h1 class='common-props-for-all-headings'>Heading 1</h1>
  <h2 class='common-props-for-all-headings'>Heading 2</h2>
  <h3 class='common-props-for-all-headings'>Heading 3</h3>
  <h4 class='common-props-for-all-headings'>Heading 4</h4>
  <h5 class='common-props-for-all-headings'>Heading 5</h5>
  <h6 class='common-props-for-all-headings'>Heading 6</h6>
</div>

这个选择器可以缩短吗？

Can this selector be shortened?

css

less