更少的 CSS 选择器问题

Question

我使用较少的 css 并尝试使用 & 来组合多个选择器。我创建了一个虚拟环境来阐述这个问题。

HTML

<div class="ampuse">
    <p>This is first</p>
    <p>This is second</p>
    <div>This is div 1</div>
    <p>This is Third</p>
    <em>This is em</em>
    <div>This is div 2</div>
    <div>This is div 3</div>
</div>

少

.ampuse{
    p,div{
        color: red;
        &+&{
            background: yellow;
            color: blue;
        }
    }
}

现在根据较少的规则，这将创建这样的 css

.ampuse p,
.ampuse div {
  color: red;
}

.ampuse p + .ampuse p,
.ampuse p + .ampuse div,
.ampuse div + .ampuse p,
.ampuse div + .ampuse div {
  background: yellow;
  color: blue;
}

但我只想渲染一次父元素，然后选择器应该在子元素下工作。这是我想要的css

.ampuse p,
.ampuse div {
  color: red;
}

.ampuse p + p,
.ampuse p + div,
.ampuse div + p,
.ampuse div + div {
  background: yellow;
  color: blue;
}

谁能帮我用更少的钱来实现它？

Answer 1

.ampuse {
    p,
    div {color: red;
        + p,
        + div {
          background: yellow;
          color: blue;
        }
    }
}

制作

.ampuse p,
.ampuse div {
  color: red;
}
.ampuse p + p,
.ampuse div + p,
.ampuse p + div,
.ampuse div + div {
  background: yellow;
  color: blue;
}

Answer 2

回答接受如我的评论中所述，使用& + p, & + div

.ampuse{
    p,div{
        color: red;

        + p,
        + div {
            background: yellow;
            color: blue;
        }
    }
}