我是否正确使用CSS父>子选择器?

| 我有以下标记:
<div id=\"footer\">
    <a href=\"/\">Home</a> | 
    <a href=\"/about\">About</a> | 
    <a href=\"/contact\">Contact</a>
</div>
具有以下样式:
#footer {
    position: relative;
    float: left;
    background: white;
    width: 960px;
    height: 50px;
    border-bottom-left-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;
}
是否有某些特殊原因无法将填充应用于我的
#footer
div的所有子
<a>
元素? 我正在尝试在页面上其他任何地方都没有
parent > child
选择器的情况下实现类似的效果,因此我假设这是我的选择器存在的问题。 浏览器版本:Chrome 11 Beta Mac OS X     
已邀请:
#footer a:first-child
会这样做吗? -从下面的评论中回答- 啊,他们都是内联的。为了将填充定义为与其他填充分开,它们需要是“ block”元素,彼此相邻浮动吗? 新增中
#footer a { display:block; float:left; }
将使您能够给第一个填充其他两个没有的填充     
@boss,“ 2”是一个内联元素,不是一个块元素。因此,垂直边距和填充仅适用于block element。然后在
a
标记中定义
display:block
以获得更多信息,请检查此内容。为什么底部填充和底部边距无助于在这些链接之间添加垂直间距?     
我不太确定为什么这行不通,但是作为一种补救措施,我建议将所有链接都包裹在
div
之内,并给它一个
margin-top
。看看小提琴... http://jsfiddle.net/Ft7Tr/ 我希望这有帮助。 里斯托     

要回复问题请先登录注册