CSS 樣式的優先級小結


1. 同一元素引用了多個樣式時,排在后面的樣式屬性的優先級高

例如,下面的 div,同時引用了 [.default] 和 [.user] 中的樣式,其中 [.user] 樣式中的 width 屬性會替換 [.default] 樣式中的 width 屬性。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        .default{
           width: 100px; /* 定義 width 屬性 */
           height: 100px; 
           background-color: #B6E0AE; 
           margin: -50px 0 0 -50px; 
           position: absolute;
           top: 50%; 
           left: 50%; 
        }
        .user{
           width: 150px; /* 這里 width 的值替換了前面 width 的值 */           
        }
    </style>
</head>
<body>
    <div class="default user"></div>
</body>
</html>

2. 樣式選擇器的類型不同時,優先級順序為:id 選擇器 > class 選擇器 > 標簽選擇器

例如,下面的 div 即獲取 id 選擇器對應的樣式,又獲取 class 選擇器對應的樣式,其中

id 選擇器 [#mydiv] 的樣式屬性(width),優先於 class 選擇器 [.user] 中的樣式屬性(width);

class 選擇器 [.user] 中的樣式屬性(background-color),優先於標簽選擇器 [div] 中的樣式屬性 (background-color)。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #mydiv{
           width: 100px;     
           height: 100px;
           margin: -50px 0 0 -50px; 
           position: absolute;
           top: 50%;
           left: 50%;  
        }
        .user{
           width: 500px; /* #mydiv 中已定義 width 屬性,這里的 width 無效 */
           background-color: #B6E0AE; 
        }
        div{
           background-color: #000000; /* .user中已定義 background-color 屬性,這里的 background-color 無效 */
        }
    </style>
</head>
<body>
    <div id="mydiv" class="user"></div>
</body>
</html>

3. 標簽之間存在層級包含關系時,后代元素會繼承祖先元素的樣式。如果后代元素定義了與祖先元素相同的樣式,則祖先元素的相同的樣式屬性會被覆蓋。繼承的樣式的優先級比較低,至少比標簽選擇器的優先級低

例如,下面 id = "child" 的子 div,部分樣式繼承自 id = "parent" 的父 div,而其新定義的樣式屬性又會覆蓋父元素的樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #parent{
           width: 100px; 
           height: 100px; 
           background-color: #B6E0AE; 
           margin: -50px 0 0 -50px; 
           position: absolute;
           top: 50%;
           left: 50%;
        }
        #child{
            /* 繼承了父元素的 width 等屬性 */
            height: 60px;  /* 這里的 height 覆蓋了父元素的 height 屬性 */
            background-color: #A7CCEF; /* 這里的 background-color 屬性覆蓋了父元素的 background-color 屬性 */
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child" style="font-size:12px;">子元素</div>
    </div>
</body>
</html>

4. 帶有 !important 標記的樣式屬性的優先級最高

例如,下面的 div 的樣式屬性中,帶有 !important 標記的樣式屬性(width)會替換其他的(width)。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #parent{
           width: 100px; 
           height: 100px; 
           background-color: #B6E0AE; 
           margin: -50px 0 0 -50px; 
           position: absolute;
           top: 50%;
           left: 50%;
        }
        #child{
            /* 繼承了父元素的 width 等屬性 */
            height: 60px;  /* 這里的 height 覆蓋了父元素的 height 屬性 */
            background-color: #A7CCEF; /* 這里的 background-color 屬性覆蓋了父元素的 background-color 屬性 */
        }
        div{
            width: 150px !important; /* 此時的 width 屬性優先級最高,不會被其他的 width 屬性覆蓋 */
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child" style="font-size:12px;">子元素</div>
    </div>
</body>
</html>

5. 樣式表的來源不同時,優先級順序為:內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式

例如,下面的 div 的樣式有多個來源,其中內聯樣式 font-size 的優先級最高,外部樣式中的 width 屬性,優先級比內部樣式中的 width 屬性的優先級要低。

/* main.css 文件 */
#parent { width: 300px; }
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="main.css" />
    <style type="text/css">
        #parent{
           width: 100px;  /* 這里的 width 屬性替換了 main.css 文件中定義的 width 屬性 */
           height: 100px; 
           background-color: #B6E0AE; 
           margin: -50px 0 0 -50px; 
           position: absolute;    
           top: 50%;
           left: 50%;
        }
        #child{
            height: 60px; /* 覆蓋父元素的 height 屬性 */
            background-color: #A7CCEF; 
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="parent">
    <!--內聯樣式 font-size 優先級比 <style></style> 中的 font-size 優先級高 -->
    <!--chrome 瀏覽器默認的 font-size 至少是 12px,即使這里設置為小於 12px,瀏覽器還是顯示 12px-->
        <div id="child" style="font-size:20px;">子元素</div>
    </div>
</body>
</html>

附:如何用 jQuery 選擇器來選擇 class 中有多個值的元素,如 class="a b c" 的元素?

下面 div 的 class 屬性中包含多個值,可以按以下方式來查找這樣的 div:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function myClick() {
            //按屬性選擇器的方式來選擇
            $("[class='ancestor parent child']").css("color", "red");

            //直接列出各個類名來選擇(順序可以互換)
            $(".ancestor.parent.child").css("color", "red");
            //打亂順序后,也可以找到同樣的元素
            $(".child.parent.ancestor").css("color", "red");

            //注意:選擇器中間不能隨便加空格(空格后面的元素表示后代元素),如:
            $(".ancestor .parent .child").css("color", "red"); //可以找到 div
            $(".child .parent .ancestor").css("color", "red"); //找不到任何元素

            //依次過濾來選擇
            $(".ancestor.parent").filter(".child").css("color", "red");
            $(".ancestor").filter(".child").css("color", "red");

            //也可以用 find() 來查找滿足條件的 所有的后代元素
            $(".ancestor.parent").find(".child").css("color", "red");
$(".ancestor").find(".child").css("color", "red");
} </script> </head> <body> <form action="http://www.bing.com/search"> <div> <div class="ancestor parent child"> <div class="child">test0</div> <span class="child">test1</span> </div> <div class="ancestor">test2</div> <div class="parent">test3</div> <div class="child">test4</div> <input type="button" onclick="myClick();" value="點擊" /> </div> </form> </body> </html>

 注:《HTML5程序設計》這本書上有更詳細的介紹


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM