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

问题描述

有没有办法完成兄弟选择器的所有组合，而不必一一写出所有的组合？

假设我想要 -size：30px; ，任何元素可以是 a ， b 或 span 。

我通常会写：

  a + b，b + a，a + span，span + a，b + span，span + b {
 font-size：30px; 
} 
  

但这会导致 n * ）组合！

我期待这样的：

  {a，b，span} + {a，b，span} {
 font-size：30px; 
} 
  

虽然如果没有选择让我知道最好的选择是请确保包含的元素始终是我想要的类型，因此我可以使用*：

  * + * {...} 
 

CSS解决方案，如果可能的话，或者SCSS，如果它导致一个更清洁或唯一可能的解决方案。 / p>



编辑：

有些人建议 nth -child 。虽然这对于一个或两个格式化是好的，这不是我的目标（我的错，应该可能指定更好）。

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

 < div class =text> 
< span>天气< / span> < i>是< i> < img src ... /> < b> nice< / b> < span>今天< / span> 
< / div> 
  

因此，我最初想到的是将想要格式化的文档更改为< div class =whatever> 所以我可以集中 div 但是再次， {span，i，b} 将是最理想的。

解决方案

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

 ：matches（a，b，span）+：matches（a，b，span）：nth-​​child（2）{
 color：＃f90; 
} 
  

，< a> ，< b> 或< a> ，< b>之前的同级元素之后的$ c>< span> ; 或< 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;} ，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>  

。

参考文献：

• 。


• 。


• 。

Is there any way to accomplish all combinations of sibling selectors without having to write them all one by one?

Let's say I want font-size: 30px; in the second element, and any element can be an a, b or span.

I would normally write:

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

But that's leads to n*(n-1) combinations!

I'm looking forward something like this:

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

Though if there is no alternatively let me know if the best choice is to always make sure that the elements contained are always the types I want so I can use *:

* + * {...}

CSS solution if possible, or SCSS if it leads to a cleaner or the only unique possible solution.

Edit:

Some of you are suggesting nth-child. Whilst this is good for one or two formattings, that was not my aim (my fault, should've probably specified it better).

I meant to give result to a long div of text containing different formatting. I.e.:

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

So, what I thought at first was to change the ones I wanted to format to <div class="whatever"> so I could just focus div with certain class. But then again, something like { span, i, b } would be the most ideal.

解决方案

In compliant browsers (sigh...), there's the option of using:

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

To style the :nth-child(2) element that is an <a>, <b> or <span> element following a previous sibling element of the type <a>, <b> or <span>.

The problem, of course, is that "in compliant browsers" part, and so far IE and Edge are both reluctant to join that particular party. Also, Webkit (Chrome, Opera and Android) are implementing a vendor-prefixed incorrect version using :-webkit-any(). On the plus side, though, as I write now, Safari, both desktop and iOS implement the :matches() pseudo-class correctly.

So, if you don't require IE/Edge support you have the option of:

:-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.

References:

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

这篇关于CSS / SCSS在某些类型之间的相邻兄弟选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！