使用 CSS 选择器从嵌套元素中获取第一个 child

Question

我试图更好地理解 CSS 选择器，并且正在摆弄 Google/Gmail。当您转到 Google 的主页并输入 "gmail" 时，它会自动为您显示该词的搜索结果。我想编写一个 CSS 选择器来找到第一个（即 Gmail 的 link，因为它应该始终是第一个结果）。这些结果的 HTML 如下所示：

<div class="srg">
  <div class="g">
    <h3 class="r">
      <a href="https://mail.google.com/" onmousedown="return rwt(a bunch of stuff I omitted for brevity)">Gmail - Google</a>

      ...

根据我从 W3schools CSS docs 中收集到的信息，我似乎想要一个名为 r 的 class 的第一个 <a> child，或：

h3.r a:first-child

但是，我使用的工具无法将其识别为第一个 link。所以我问：这是 Gmail 的正确选择器（第一个）link，还是我哪里出错了？

Answer 1

好吧，您所指的锚元素是仅父元素的 h3.r 子元素。

所以 :first-child、:last-child 和 :only-child 都适用。

假设它在文档中是唯一的，一个简单的 h3.r > a（子选择器）或 h3.r a（后代选择器）就足够了。

您的选择器 – h3.r a:first-child – 从技术上讲，应该也能正常工作。

根据上图，属性选择器也可以工作：

h3.r a[data-href="https://mail.google.com/"]

更多信息：https://www.w3.org/TR/css3-selectors/#selectors

Answer 2

在 Geb 中，您还可以使用

`$("h3.r").find("a")[0]

到select第一个child.

Answer 3

使用 :first-of-type 与 :nth-child 非常相似，但有一个关键的区别：它不太具体。

在上面的示例中，如果我们使用了 p:nth-child(1)，则不会发生任何事情，因为该段落不是其父项（<article>）的第一个子项。这揭示了 :first-of-type 的威力：它针对与相似兄弟姐妹（而非所有兄弟姐妹）相关的特定排列中的特定类型元素。

参考：https://css-tricks.com/almanac/selectors/f/first-of-type/

使用 CSS 选择器从嵌套元素中获取第一个 child

Using CSS selectors to get first child from a nested element

html

css-selectors

geb