某些类型之间的 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

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

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

为 :nth-child(2) 设置样式<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() .