Chrome/Firefox忽略了CSS嵌套元素嗎？

Question

這可能很容易，所以我提前道歉，但我在第5小時試圖弄清楚這個爛攤子。這裏的UL我試圖表現爲一個單槓：

<div id="navbarwrapper"> 
    <ul id="navbar"> 
    <li><a href="works.html">Search</a></li> 
    <li><a href="works.html">Tips</a></li> 
    <li><a href="works.html">Neighborhoods</a></li> 
    <li><a href="works.html">Relocation</a></li> 
    </ul> 
</div> 

而這裏似乎發生故障怪CSS：

#navbar {} 
#navbar ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
} 
#navbar li {display: inline;} 
#navbar ul li a {text-decoration:line-through;} 

我遇到的問題是，這個標記，包裝在HTML中的錨定標籤中的文本並未接收到直通（我使用直通式作爲佔位符，因爲它在工作與否時很明顯;實際上我並不希望直通） 。

這是奇怪的位。如果我用下面替換「#navbar UL李一」窩，它的工作原理：

#navbar li a {text-decoration:line-through;} 

而且，如果我改變「#navbar李{顯示：內聯;}」與下面，我失去了直列屬性：

#navbar ul li{display:inline;} 

難道是因爲我用「#navbar」和「ul」來複制嗎？對我來說這似乎完全是太奇怪了，而且我感覺好像我以前能夠毫無錯誤地使用這種語法。

感謝您的幫助提前。

Answer 1

您的選擇器不正確。

#navbar是UL元素本身，所以選擇器#navbar ul不針對任何東西。

正確的選擇是

#navbar { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
} 
#navbar li { display: inline; } 
#navbar li a { text-decoration:line-through; } 

Answer 2

#navbar ul is wrong...#navbar is the ul itself. 

Answer 3

你ul已經有了navbar ID。這就是爲什麼#navbar ul不匹配任何東西。

ul#navbar將匹配。

Answer 4

你<ul>有ID #navbar，所以用#navbar ul你實際上解決您的ul內的額外ul。

嘗試

ul#navbar li a {text-decoration:line-through;}