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 上得到假阴性）：

＆＃13;

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

＆＃13;

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

＆＃13;

我已经尝试使用h4 ~ p > a，但它会选择所有 p 而不仅仅是第一个<在栏时出现误报段）：

＆＃13;

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

＆＃13;

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

＆＃13;

我错过了什么？它甚至可以完成吗？

Answer 1

使用纯CSS无法做到这一点。

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

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

Answer 2

您目前无法将元素内容用作CSS选择器。如果您可以在生成HTML的任何内容中静态或动态地添加类，那么您将能够使用CSS选择器来完成您想要的任务。

Answer 3

样式定义应该是这样的，在h4 + p中，如果你只想选择第一个，那么p不需要任何选择器

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

<div>
  <h4>Foo</h4>
  <p>
    <a href="#">foo</a>
  </p>
  <p>bar</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>

CSS选择包含链接的第一个兄弟段落

3 个答案: