CSS 选择包含链接的第一个同级段落

Question

一位同事问我是否知道如何进行以下选择，坦率地说，我什至不确定是否可以仅使用 CSS 来完成。

假设具有以下结构:

<div>
  <h4>Foo</h4>
  <p>bar</p>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>
<div>
  <h4>Bar</h4>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>

我想选择第一个 p 中包含的所有 a，它是包含 foo 的 h4 的同级。

我已经尝试过 h4 + p > a 但它只会在之前没有其他 p 时选择它(它在第一个 div 上得到假阴性):

h4 + p > a {
  background-color: yellow;
}

<div>
  <h4>Foo</h4>
  <p>bar</p>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>
<div>
  <h4>Bar</h4>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>

我已经尝试过 h4 ~ p > a 但它会选择所有 p 而不仅仅是第一个(它在 上得到误报条段落):

h4 ~ p > a {
  background-color: yellow;
}

<div>
  <h4>Foo</h4>
  <p>bar</p>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>
<div>
  <h4>Bar</h4>
  <p>
    <a href="#">foo</a>
  </p>
  <p>
    <a href="#">bar</a>
  </p>
</div>

我错过了什么？甚至可以做到吗？

Answer 1

这不能用纯 CSS 来完成。

您不能将元素的内容添加到 CSS 选择器中。

要即时执行此操作，您需要修改 HTML 标记或应用一些 javascript。