Am I using the CSS parent > child selector correctly?

I have the following markup:

<div id="footer">
    <a href="/">Home</a> | 
    <a href="/about">About</a> | 
    <a href="/contact">Contact</a>
</div>

With the following styling:

#footer {
    position: relative;
    float: left;
    background: white;
    width: 960px;
    height: 50px;
    border-bottom-开发者_如何学Pythonleft-radius: 50px;
    border-bottom-right-radius: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 50px;
    box-shadow: 2px 2px 3px #000;
    -moz-box-shadow: 2px 2px 3px #000;
    -webkit-box-shadow: 2px 2px 3px #000;
}
#footer > a {
    padding-top: 10px;
}

Is there any particular reason that the padding isn't applied to all of the child <a> elements of my #footer div?

I'm trying a similar effect without a parent > child selector somewhere else on my page, so I'm assuming it's a problem with my selector.

Browser version: Chrome 11 Beta Mac OS X

@boss, <a> is an inline element not a block element. so, vertically margin & padding only working on block element . Then define display:block in your a tag for more information please check this Why do bottom padding and bottom margins not help to add vertical spacing between these links?

Would #footer a:first-child do it?

-- Answer from the comments below --

Ahh, they're all inline. To define padding separate from the others they need to be "block" elements, floating next to each other?

Adding

#footer a { display:block; float:left; }

would give you the ability to give the first one padding the other two don't have

I'm not quite sure why this isn't working, however as a remedy, I recommend wrapping all your links in like a div and giving that a margin-top. Check out the fiddle...

http://jsfiddle.net/Ft7Tr/

I hope this helps.
Hristo