在 :has() 中嵌套相对选择器？

Question

说我有

<div id="outer-div">
  <div class="inner-div"></div>
  <div class="inner-div"></div>
</div>

我要选择

outer-div

.outer-div:has(> .inner-div:has(+ inner-div)) {...}

不起作用。

1. 我可以像这样嵌套相对选择器吗？
2. 如何最好地选择有 2 个特定孩子的父母？

谢谢！

Answer 1

哦 - 无法嵌套

:has() 伪类不能嵌套在另一个 :has() 中。

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

---

#outer-div:has(> .inner-div + .inner-div)

可以选择“有兄弟姐妹的父母”，这就足够了

Answer 2

如何最好地选择有 2 个特定孩子的父母？

这里有一个可以实现效果但不需要嵌套相对选择器的方案：

.outer-div{
  margin: 10px;
  border: 1px solid;
  display: inline-block;
}

.outer-div:has(.inner-div+.inner-div){
  color: red;
}

<div class="outer-div">
  <div class="inner-div">1</div>
  <div class="inner-div">1</div>
</div>

<div class="outer-div">
  <div class="inner-div">2</div>
  <div class="inner-div1">2</div>
</div>

<div class="outer-div">
  <div class="inner-div">3</div>
</div>

这是笔：https://codepen.io/lerner-zhang/pen/OJdzyPp