CSS选择器：设置div内的第一个“a”

Question

我无法找到正确的CSS选择器，我看起来像这样的结构：

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

我想设置第一个a

的div元素的样式

我尝试过这个选择器，但没有运气

div:first-child a{}

Answer 1

first-child应该可以正常使用，您可以尝试

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

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

Demo

如果您愿意在每个a代码中第一次出现div样式而不是您需要使用

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

此处，每个a代码

中都会选择每个div

最后但并非最不重要的是，如果您只想在1st a中选择1st div而不是使用以下选择器

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 })选择器。