我是否正确使用了 CSS 父 > 子选择器？答案

【问题标题】：Am I using the CSS parent > child selector correctly?我是否正确使用了 CSS 父 > 子选择器？
【发布时间】：2011-04-18 19:00:55
【问题描述】：

我有以下标记：

<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

【问题讨论】：

首先要记下浏览器的型号和版本。许多旧版本的 IE 不支持立即子选择器，例如此外，您需要指定“不工作”的含义。
打开 Chrome 的开发者工具，指向有问题的标签，然后检查它的填充。它没有显示的原因可能有数百万个 - 例如，它是否被更高优先级的规则覆盖？
maxdesign.com.au/articles/inline --- 对于 display: inline; 的元素，通常会忽略顶部填充
感谢大家的帮助！

标签： css css-selectors parent-child

【解决方案1】：

@boss, <a> 是内联元素而不是块元素。因此，垂直边距和填充仅适用于块元素。然后在您的a 标签中定义display:block 以获取更多信息，请查看此Why do bottom padding and bottom margins not help to add vertical spacing between these links?

【讨论】：

【解决方案2】：

#footer a:first-child 会这样做吗？

-- 下面cmets的回答--

啊，它们都是内联的。要定义与其他填充分开的填充，它们需要是“块”元素，彼此相邻浮动？

添加

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

会让你有能力给第一个填充其他两个没有

【讨论】：

我使用您提到的浏览器得到了正确的响应。不过，它似乎并没有区分使用“>”的元素。 jsbin.com/oqova4/edit
如果这有什么不同的话，我正在使用 node.js。我应该发布我的服务器和端口号吗？
我真的怀疑这会影响你的 CSS。如果你可以让你的设计在 jsbin 或独立的 HTML 文件中工作，那么它可能是 nodejs - 但一开始我看不出这会如何影响它。 “Apple Alt J”进入开发工具，检查样式（如上面提到的 Stephen Chung）并检查每个元素的样式
试试这个 (jsbin.com/acahe6/3) 我的页面外观的粗略版本。通过检查开发工具，我没有得到任何填充。也许它正在被覆盖。
添加#footer a { display:block;向左飘浮; } 会让你有能力给第一个填充其他两个没有....但是它们看起来很好内联？

【解决方案3】：

我不太清楚为什么这不起作用，但作为一种补救措施，我建议将所有链接包装成 div 并给它一个 margin-top。看看小提琴...

http://jsfiddle.net/Ft7Tr/

我希望这会有所帮助。
赫里斯托

【讨论】：