CSS选择器：样式化div内的第一个"a"

Question

我在寻找正确的CSS选择器时遇到了麻烦，我的结构看起来像这样:

<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>

我希望样式化第一个 div 中的 a 元素。

我尝试使用此选择器，但没有成功。

div:first-child a{}

- user2164961

---

如果页面上唯一的HTML代码是您指定的代码，则它可以完美运行。请展示完整的页面。 - lavavrik

Answer 1

first-child 应该能够完美工作，你可以尝试一下

div:nth-of-type(1) a { /* Or div:first-child a */
    color: red;
}

上述选择器将选择所有第一个

元素，并将颜色应用于所有位于第一个

内部的元素 Demo 如果您想要样式化每个

标签中第一个出现的元素，那么您需要使用：

div a:nth-of-type(1) { /* Or div a:first-child */
    color: red;
}

这里的意思是选择每个 div 标签中的第一个 a 元素。

如果你只想选择第一个 div 中的第一个 a，可以使用以下选择器：

div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
    color: red;
}

注意：如果上述选择器仍然无效，那么可能性要么是某些规则比您声明的规则更具体，要么使用了！important，或者（可能性最小）您在较旧的浏览器上进行测试。

- Mr. Alien

Answer 2

你自己的例子也可以运行。

http://jsfiddle.net/7Pea3/

div:first-child a {
    color: #f00;
}

- Companjo

Answer 3

第一个 div 将被选中，所有的 a 都会接收到颜色 #CCC。我不明白为什么这不起作用。

div:first-child a { 
    color: #CCC;
}

否则测试此解决方案，该解决方案选择第一个 div 并为 div 中的第一个 a 标签设置样式：

div:first-child a:first-child(1) {
    color: #CCC;
}

如果你在使用:first-child选择器时遇到问题，可以尝试使用:nth-of-type({ number expression | odd | even })选择器。

- Michael Unterthurner