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

Answer 1

first-child应该

绝对有效，你可以试试

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

上面的选择器将选择所有第一个div元素，并将颜色应用于第一个div内的所有a

演示

如果您愿意在每个div标签中设置第一次出现的a样式，则需要使用

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

在这里，每个a都将在每个div标签中选择

最后但并非最不重要的一点是，如果您只想在第一div中选择第一a，请使用以下选择器

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

注意：如果上述选择器仍然不起作用，则可能性更大 是某些规则比您声明的规则更具体， 或者!important某处使用，或者(最少的机会(你正在测试 在较旧的浏览器上

Answer 2

你自己的例子也有效。

http://jsfiddle.net/7Pea3/

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

Answer 3

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

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

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

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

否则，您在使用:first-child选择器时遇到问题，请使用:nth-of-type({ number expression | odd | even })选择器。