我是否正確使用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父級>子選擇器？

回答

相關問題