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 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>类型的上一个同级元素之后，{{1 }或<b>。

问题当然是兼容浏览器中的＆＃34; ＆＃34;部分，到目前为止IE和Edge都不愿加入那个特定的派对。此外，Webkit（Chrome，Opera和Android）正在使用<span>实现以供应商为前缀的错误版本。不过，正如我现在所写，Safari，桌面和iOS都正确地实现了:-webkit-any()伪类。

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

:matches()

＆＃13;

:-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;
}

＆＃13;

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;
}

＆＃13;

JS Fiddle demo

参考文献：

Answer 2

我认为

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

应该有效

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

2 个答案: