如何使用 CSS 定位 div 内的第一个链接？答案

【问题标题】：How do I target the first link inside a div with CSS?如何使用 CSS 定位 div 内的第一个链接？
【发布时间】：2012-10-28 10:29:12
【问题描述】：

例如我有这个：

<div>
  <a href="#">sample 1</a>
  <a href="#">sample 2</a>
  <a href="#">sample 3</a>
</div>

我想用 CSS 定位第一个链接。

【问题讨论】：

【解决方案1】：

您可以使用第一个子选择器：

div > a:first-child { /* your css */ }

【讨论】：

【解决方案2】：

试试这个代码：

div > a:first-child{
   //your css code
}

【讨论】：

我在 div 中也有一个无序列表，这个 CSS 也针对无序列表中的第一个链接。有什么方法可以只定位 div 中的第一个链接，而不是 div 中每个 div 中的第一个链接？
你必须为你的 div 或一个类设置一个 id，然后在你做了这样的事情之后：#divid a:first-child{} 在这种情况下，你选择 div 的第一个链接id“分”
我明白，但它仍在选择“div”的 div 内的每个第一个链接
@DannyCooper 我编辑了我的答案。现在它将只针对 div 内的第一个 a，而不是列表中的一个。
@sticksu Bingo，我会尽快给你答案。

【解决方案3】：

div a:nth-of-type(n)
{
   /* css */
}

其中 n 是您想要的行数.. 在你的情况下

div a:nth-of-type(1)
{
   /* css */
}

【讨论】：