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

我有以下的标记：我是否正确使用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测试版中的Mac OS X

来源

2011-04-18 Qcom

您需要放下的第一件事是浏览器型号和版本。许多旧版本的IE不支持即时子选择器，例如，此外，您需要指定“不工作”的含义。 – 2011-04-18 03:57:05

我的不好。更好？ – Qcom 2011-04-18 04:00:07

会#footer a:first-child办呢？

- 从下面的评论答案 -

啊，他们都在线。要定义填充与其他填充分开，他们需要成为“块”元素，并且相互漂浮？

添加

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

会给你给第一个填补其他两个没有

来源

2011-04-18 04:03:37

嗯，没有。这可能是一个不同的问题.. – Qcom 2011-04-18 04:07:25

我使用你提到的浏览器得到正确的回应。它似乎没有区分使用'>'的元素。 http://jsbin.com/oqova4/edit – 2011-04-18 04:10:17

我使用node.js，如果这有什么区别。我应该发布我的服务器和端口号吗？ – Qcom 2011-04-18 04:12:33

@boss，<a>是一个内联元素不是块元素的能力。所以，垂直余量&填充只能在块元素上工作。然后在你的a标签定义display:block了解更多信息，请检查该Why do bottom padding and bottom margins not help to add vertical spacing between these links?

来源

2011-04-18 04:32:22 sandeep

我不明白为什么这是行不通的，但是作为一种补救措施，我建议环绕所有的链接在像div，并给予一个margin-top。退房的小提琴......

http://jsfiddle.net/Ft7Tr/

我希望这有助于。
Hristo

来源

2011-04-18 04:34:00 Hristo

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

回答

相关问题