如何使用SASS来模拟使用：matches（a，b）+：匹配（a，b）：nth-​​child（2）？

Question

回答问题＆＃34; Data distribution and replication，＆＃34;其中OP希望将父元素的第二个子元素设置为样式，并且前面的兄弟元素是各种类型的元素。

我使用matches()选择器提出CSS/SCSS Adjacent sibling selector between certain types（尽管Firefox和Webkit浏览器都是 - 在撰写本文时 - 使用:any()伪类的供应商前缀实现）

由于Internet Explorer和Edge无法实现任何版本的选择器:any()或:matches()，因此传统的时间已经过去了，尽管因为它是一个实验性功能，我可以＆ ＃39;对此决定负责，或者“失败”。＆＃39;

但是，为了兼容性，我想问：是否有一种方法可以使用SASS形成适当的选择器来可靠地设置以下内容：

＆＃13;

＆＃13;

a::before {
  content: 'link';
}
span::before {
  content: 'span';
}
b::before {
  content: 'b';
}
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;

<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should be styled</h2>
  <div>
    <span></span>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
    <span></span>
  </div>
</div>
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should <em>not</em> be styled</h2>
  <div>
    <a href="#"></a>
    <em></em>
  </div>
  <div>
    <em></em>
    <a href="#"></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

对于SASS我期望，或者至少想象，分组应该从以下形式扩展（虽然我不确定，因此这个问题，至于< em>如何模拟:matches()语法或SASS语法可能是什么）：

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

进入显式选择器，例如：

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

＆＃13;

＆＃13;

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

＆＃13;

<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should be styled</h2>
  <div>
    <span></span>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
  </div>
  <div>
    <a href="#"></a>
    <span></span>
    <span></span>
  </div>
</div>
<div>
  <h2>The second element child of each of these following &lt;div&gt; elements should <em>not</em> be styled</h2>
  <div>
    <a href="#"></a>
    <em></em>
  </div>
  <div>
    <em></em>
    <a href="#"></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• answer。
• :any()。
• :matches()。

Answer 1

这可能是一个解决方案，不像使用:matches那样简洁，但足够接近：

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

另一个是明确地进行扩展循环：

$tags: a, b, span;
@each $a in $tags {
   @each $b in $tags {
        #{$a} + #{$b}:nth-child(2) {
            color: #f90;
        }
   }
}

（也可以使用mixin编写，但这不会让它看起来好多了......）

但实际上，我会在上游工作以确保有一个类而不是那3个标签。

Answer 2

您可以将postcss与level4插件一起使用。这会将:matches转换为等效的CSS3查询。

li:matches(:last-child, .fancy) { ... }

/* compiles to */

li:last-child, li.fancy { ... }

文档和示例（如上所述）可以在level4的Github页面上找到：https://github.com/stephenway/level4。