CSS/SCSS 某些类型之间的相邻兄弟选择器

Question

有没有什么方法可以完成兄弟选择器的所有组合，而不必一一写出来？

假设我想在第二个元素中使用font-size: 30px;，任何元素都可以是a、b 或span。

我通常会写：

a + b, b + a, a + span, span + a, b + span, span + b {
  font-size: 30px;
}

但这会导致n*(n-1) 组合！

我期待这样的事情：

{a,b,span} + {a,b,span} {
  font-size: 30px;
}

如果没有其他选择，请告诉我最好的选择是否始终确保包含的元素始终是我想要的类型，以便我可以使用 *:

* + * {...}

CSS 解决方案（如果可能），或 SCSS（如果它导致更清洁或唯一可能的解决方案）。

编辑：

你们中的一些人建议nth-child。虽然这对一两种格式有好处，但这不是我的目标（我的错，应该更好地指定它）。

我的意思是为包含不同格式的长 div 文本提供结果。即：

<div class="text">
  <span>The weather</span> <i>is</is> <img src... /> <b>nice</b> <span>today</span>
</div>

所以，我最初的想法是将我想要格式化的那些更改为<div class="whatever">，这样我就可以将div 专注于某个类。但话又说回来，像{ span, i, b } 这样的东西是最理想的。

Answer 1

在兼容的浏览器中 (sigh...)，可以选择使用：

:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}

在<a>、<b> 或<span> 类型的前一个兄弟元素之后设置<a>、<b> 或<span> 元素的样式。

当然，问题在于“在兼容的浏览器中”部分，到目前为止，IE 和 Edge 都不愿意加入那个特定的一方。此外，Webkit（Chrome、Opera 和 Android）正在使用 :-webkit-any() 实现以供应商为前缀的错误版本。不过，从好的方面来说，正如我现在所写的，Safari、桌面和 iOS 都正确地实现了 :matches() 伪类。

因此，如果您不需要 IE/Edge 支持，您可以选择：

:-webkit-any(a, b, span) + :-webkit-any(a, b, span):nth-child(2) {
  color: #f90;
}
:-moz-any(a, b, span) + :-moz-any(a, b, span):nth-child(2) {
  color: #f90;
}
:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}

a::before {
  content: 'link';
}
b::before {
  content: 'bold'
}
span::before {
  content: 'span';
}
em::before {
  content: 'em';
}
:-webkit-any(a,
b,
span) +:-webkit-any(a,
b,
span):nth-child(2) {
  color: #f90;
}
:-moz-any(a,
b,
span) +:-moz-any(a,
b,
span):nth-child(2) {
  color: #f90;
}
:matches(a,
b,
span) +:matches(a,
b,
span):nth-child(2) {
  color: #f90;
}

<div>
  <a href="#"></a> <span></span>
</div>
<div><span></span>
  <a href="#"></a>
</div>
<div><b></b>  <span></span>
</div>
<div><b></b>
  <a href="#"></a>
</div>
<div><b></b>  <em></em>
</div>
<div><em></em>
  <a href="#"></a>
</div>

JS Fiddle demo.

参考资料：

• :any()。
• :matches()。
• Compatibility for :matches()。

Answer 2

我认为

a *:nth-child(2), b *:nth-child(2) {
  font-size: 30px;
}

应该工作