標籤：style blog http color 使用 os strong io
在寫一個關於背景圖的CSS時候發現一個奇怪的現象，
原圖：
如下代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>首頁 | shopping</title> <style type="text/css"> *{margin: 0;padding: 0;} li{list-style-type: none;} /*皮膚設定*/ #skin{width: 115px;height: 15px;margin-top: 12px;float: left;margin-left: 10px;overflow: hidden;text-indent: -999px} #skin li{width: 15px;height: 15px;background: url(http://images.cnitblog.com/blog/607355/201408/011822379465492.gif);float: left;cursor:pointer; margin-right:5px;} #skin_0{background-position: 0px 0px;} #skin_1{background-position: 15px 0px;} #skin_2{background-position: 35px 0px;} #skin_3{background-position: 55px 0px;} #skin_4{background-position: 75px 0px;} #skin_5{background-position: 95px 0px;} </style></head><body> <ul id="skin"> <li id="skin_0" class="skin_selected">藍</li> <li id="skin_1">綠</li> <li id="skin_2">橙</li> <li id="skin_3">湛藍</li> <li id="skin_4">紅</li> <li id="skin_5">紫</li> </ul></body></html>
理論上效果應該是這樣的：
但是，若其中的 #skin li中背景屬性寫為 background: ，則不能實現，結果是這樣的
也就是說，#skin_0、#skin_1、#skin_2、#skin_3、#skin_4、#skin_5這幾個id所定義的樣式沒起作用，還是上面的“#skin li”所定義的 background: url(http://9.liulong.sinaapp.com/theme.gif); 在起作用。
在firebug中也可以看出：
經過我的測試，解決這個問題有兩種方式：
第一種是，改為：background-image: url(http://9.liulong.sinaapp.com/theme.gif);則可以實現。
第二種是，把#skin_0，改為#skin li#skin_0 ,其他的依次類推，例如我們更改為：
#skin li#skin_0{background-position: 0px 0px;} #skin li#skin_1{background-position: 15px 0px;} #skin li#skin_2{background-position: 35px 0px;} #skin_3{background-position: 55px 0px;} #skin_4{background-position: 75px 0px;} #skin_5{background-position: 95px 0px;}
效果：
可以看出來，前三個id發生了作用。
綜上，我認為使用background和background-image會對CSS優先順序造成影響。那麼，其他類似的屬性應該也是如此，例如使用background和background-color等等這類屬性。此處暫時不做驗證。
在書寫的時候應該注意。CSS選取器寫的更細緻，要麼單使用一個屬性定義。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
