CSS中的Concat标签答案

【问题标题】：Concat tag in CSSCSS中的Concat标签
【发布时间】：2016-10-02 16:41:27
【问题描述】：

我想做这样的事情：

h* + p {
 color: red;
}

代替

h1 + p, h2+p... {
 color:red;
}

有可能吗？（还没有找到任何解决方案）我想只使用 CSS 来做到这一点。谢谢。

【问题讨论】：

标签： html css tags

【解决方案1】：

你可以使用像 Less 或 Sass 这样的预处理器。如果您选择 Sass ，这就是您可以在 sass 文件中执行此操作的方法：
`@for $i 到 6 { h.#{$i} + p { 颜色：蓝色； }

CSS 本身是非常有限的！

【讨论】：

【解决方案2】：

我看到这个问题很老了。无论如何，今天可以通过 :is 伪类实现类似的功能，而无需使用任何预处理器。

:is(h1, h2, h3)+p {
  color: red;
}

<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
  turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>

<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
  turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
  turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>

另外，请查看caniuse.com 了解有关浏览器支持的更多信息。

【讨论】：