HTML+CSS雜記：[1]css無法控制標籤元素?

如果寫一些比較複雜的HTML時可能會遇到自己寫的某些css樣式居然會不產生作用，這種情況我也遇到過，現在我就分享一下我的解決方法。

工具/原料

HTML

CSS

方法/步驟

將下面的程式碼執行：

按道理id為"down_menu"的ul元素會被控制，"a"會變成黑色，其它的內容會變成紅色，可結果卻全是紅的：

為什麼會這樣？

因為html標籤巢狀一般不能超過三層，否則會出現問題。比如第四層（下面的

）的樣式會被上面的ul樣式給覆蓋，即它的優先順序不如巢狀它的同類標籤。




在css中的

#all li{color:#002233;}


樣式會將所有#all下的li元素的文字變成“#002233”顏色，即使在下面加上這一個樣式：

.down_menu li{color:#000000;}


它也仍然不是黑色。因為#down_menu li所控制的li已經被#all li控制了。

那麼怎麼解決呢？

如果一定要巢狀，那麼就採用如下辦法：

辦法：

將

#all li{


color:#002233;


}


改成

#all {


color:#002233;


}


或者

將

.down_menu{


color:#000000;


}


改成

#down_menu li{


color:#000000;


}


改完後執行結果：




注意事項


本經驗由本人原創，沒有功勞也有苦勞，沒有苦勞也有疲勞，希望能投個票鼓勵一下！