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

Question

I am having trouble finding the correct CSS selector, the structure I have looks like this:

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

I would like to style the a element of the first div

I have tried with this selector but with no luck

div:first-child a{}

Answer 1

first-child should work absolutely well, you can try

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

The above selector will select all 1st div element and will apply color to all a which are inside 1st div

Demo

If you are willing to style 1st occurrence of a in every div tag than you need to use

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

Here every 1st a will be selected in every div tag

Last but not the least if you want to select 1st a only in 1st div than use the below selector

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

Note: If still the above selectors doesn't work, than the possibility is either some rule is more specific than the rules you are declaring, or !important is used somewhere, or (least chances) you are testing on older browsers

Answer 2

Your own example is working too.

http://jsfiddle.net/7Pea3/

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

Answer 3

The first div will be selected and all a recive the color #CCC . I don't understand why this isn't working.

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

Else test this solution, that selects the first div and styles the first a tag in the div:

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

Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.