使用background和background-image對CSS優先級形成影響

時間 2019-11-14

標籤使用 background image css 優先級形成影響欄目 CSS 简体版

原文原文鏈接

在寫一個關於背景圖的CSS時候發現一個奇怪的現象，css

原圖：html

以下代碼：app

<!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(https://images0.cnblogs.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: ，則不能實現，結果是這樣的ui

也就是說，#skin_0、#skin_一、#skin_二、#skin_三、#skin_四、#skin_5這幾個id所定義的樣式沒起做用，仍是上面的「#skin li」所定義的 background: url(http://9.liulong.sinaapp.com/theme.gif); 在起做用。url

在firebug中也能夠看出：spa

通過個人測試，解決這個問題有兩種方式：

第一種是，改成：background-image: url(http://9.liulong.sinaapp.com/theme.gif);則能夠實現。code

第二種是，把#skin_0，改成#skin li#skin_0 ,其餘的依次類推，例如咱們更改成：xml

        #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;}