CSS :has(+) for previous sibling elements

Question

所以我刚读到我可以定位 previous sibling elements使用 :has(+ ) 伪类。

我去执行了以下规则。不幸的是，这是行不通的。我在祈祷什么吗？

p {
  margin: 2rem;
}

p:has(a[class*="link--button"]):has( + p:has(a[class*="link--button"])) {
  margin-bottom: 0;
}

<div>
  <p>
    <a class="link--button" href="#">first link</a>
  </p>
  <p>
    <a class="link--button" href="#">second link</a>
  </p>
</div>

您还可以在 jsfiddle 中找到代码

这里还有另一篇文章The CSS :has() selector is way more than a “Parent Selector提到它

Answer 1

The :has() pseudo-class cannot be nested;

但是。我认为 p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) 符合你的要求做。

请注意，使用 margin-bottom 会导致测试不明确，因为第一个 p 元素的底部边距无论如何都会与第二个 p 元素的顶部边距折叠。

所以我添加了一个颜色声明来表明选择器正在工作。

p {
  margin: 2rem;
  color:red;
}

p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) {
  margin-bottom: 0;
  color:green;
}
a {
  color:inherit
}

<div>
  <p>
    <a class="link--button" href="#">first link</a>
  </p>
  <p>
    <a class="link--button" href="#">second link</a>
  </p>
</div>