HTML＆CSS：「>」大於選擇器樣式不適用

我正面臨一個非常奇怪的問題。從我所瞭解的CSS「>」而不是選擇器是，它基本上只適用於直接的孩子的風格。但是我根本無法獲得適用於元素的樣式。奇怪的是，在檢查元素時，我可以看到Firebug中的其他CSS部分，但我看不到應用的「>」樣式。HTML＆CSS：「>」大於選擇器樣式不適用

HTML我有是：

<div id="navigation"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li><a href="#">Second</a></li> 
     <li><a href="#">Third</a></li> 
     <li><a href="#">Fourth</a></li> 
    </ul> 
</div>

CSS的部分是這樣的：

/* Navigation */ 
#navigation { 
    min-height:45px; 
} 

#navigation ul { 
    list-style-type: none; 
    margin: 0px 45px 0px 0px; 
    font-weight: bold; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #F3F3F3; 
} 

#navigation ul li { 
    margin: 0px; 
    float: left; 
    position: relative; 
} 

#navigation > ul > li { 
    line-height: 26px; 
    display: block; 
} 

#navigation > ul > li > a { 
    border-right: 1px solid #F3F3F3; 
    color: #333; 
    display: block; 
    font-family: 'Trebuchet MS'; 
    font-size: 15px; 
    padding: 10px 18px 13px; 
    position: relative; 
    text-decoration: none; 
    z-index: 1000; 
} 

#navigation > ul > li.current_page_item > a, 
#navigation > ul > li.current_page_parent > a, 
#navigation > ul > li.current_page_ancestor > a { 
    border-top: 3px solid #72AC4B; 
    color: #72AC4B; 
    font-family: 'Trebuchet MS'; 
    margin-top: -3px; 
}

所有其他樣式被應用，因爲它通常會，但使用的樣式塊「 - >」選擇根本沒有被承認。所以，如果我檢查li元說想，我能夠看到應用以下樣式：

#navigation ul li { 
    margin: 0px; 
    float: left; 
    position: relative; 
}

但我不能看到應用以下樣式：

#navigation > ul > li { 
    line-height: 26px; 
    display: block; 
}

即使它是一個直接的孩子。有沒有人遇到過這個問題？什麼可能導致這種情況？

來源

2012-10-02 Amyth

我已經用chrome和firefox測試了這個，我已經把'<！DOCTYPE html>'添加到頁面的頂部了。 – Amyth

你使用什麼瀏覽器？你的CSS很好，它可以在我試過的瀏覽器中使用。 – MBozic

作了[小提琴]（http://jsfiddle.net/UR4XB/）。按我的預期工作。 –

假設您提供的HTML示例是您嘗試應用這些樣式的完整代碼片段，但我沒有看到可能會發生任何衝突以保證使用直接後代選擇器（>），。

只需使用子選擇器來完成整個任務。

/* Navigation */ 
#navigation { 
    min-height:45px; 
} 

#navigation ul { 
    list-style-type: none; 
    margin: 0px 45px 0px 0px; 
    font-weight: bold; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #F3F3F3; 
} 

#navigation ul li { 
    margin: 0px; 
    float: left; 
    position: relative; 
    line-height: 26px; 
    display: block; 
} 

#navigation ul li a { 
    border-right: 1px solid #F3F3F3; 
    color: #333; 
    display: block; 
    font-family: 'Trebuchet MS'; 
    font-size: 15px; 
    padding: 10px 18px 13px; 
    position: relative; 
    text-decoration: none; 
    z-index: 1000; 
} 

#navigation ul li.current_page_item a, 
#navigation ul li.current_page_parent a, 
#navigation ul li.current_page_ancestor a { 
    border-top: 3px solid #72AC4B; 
    color: #72AC4B; 
    font-family: 'Trebuchet MS'; 
    margin-top: -3px; 
}

來源

2012-10-02 21:41:45 Nw167

不，'>'是兒童選擇器。「直系後裔」就是它的另一個名字;他們都是同樣的意思。該空間是後代選擇器。 – BoltClock

對不起，被混淆了的術語，但仍然站立着。 – Nw167

謝謝@ Nw167。雖然我發現我工作的cms實際上是用'div'元素包裝'ul'，所以'ul'不再是父div的直接子元素，這就是爲什麼這些樣式沒有被應用。 – Amyth

嘿，我已經用「display：none」替換了「display：block」，並且樣式適用於firefox。問題在於行高，作爲最終設計你想達到什麼目標？嘗試改變填充或邊距，你想要更少的空間。

如果這不是問題，你可以給我們一個你正在尋找的最終結果的例子？

來源

2012-10-02 21:25:16

作爲@maenu已經提出了一個小提琴，它的作品完美，我不認爲它是與風格的一部分做的，這裏是鏈接http://jsfiddle.net/UR4XB/ – Amyth

HTML＆CSS：「>」大於選擇器樣式不適用

回答

相關問題