css樣式表中的樣式覆蓋順序

時間 2019-12-08

標籤 css 樣式表中覆蓋順序欄目 CSS 简体版

原文原文鏈接

有時候在寫CSS的過程當中，某些限制老是不起做用，這就涉及了CSS樣式覆蓋的問題，以下html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #navigator {
            position: absolute;
            background-color: red;
        }

        .current_bg {

            background-color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="navigator" class="current_bg" > 顯示爲紅色</div>
</body>
</html>

查找一些教材中（w3schools等），只說css的順序是「元素上的style」 > 「文件頭上的style元素」 >「外部樣式文件」，但對於樣式文件中的多個相一樣式的優先級怎樣排列，沒有詳細說明。通過測試和繼續搜索，得知優先級以下排列：測試

1. 樣式表的元素選擇器選擇越精確，則其中的樣式優先級越高：spa

id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式code

因此上例中，#navigator的樣式優先級大於.current_block的優先級，及時.current_block是最新添加的，也不起做用。htm

2. 對於相同類型選擇器制定的樣式，在樣式表文件中，越靠後的優先級越高blog

注意，這裏是樣式表文件中越靠後的優先級越高，而不是在元素class出現的順序。好比.class2 在樣式表中出如今.class1以後：get

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .class1 {
            position: absolute;
            background-color: red;
        }

        .class2 {

            background-color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="navigator" class="class1 class2" > 顯示爲綠色</div>
</body>
</html>

而某個元素指定class時採用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的後面，但由於在樣式表文件中class1處於class2前面，此時仍然是class2的優先級更高。it

3. 若是要讓某個樣式的優先級變高，可使用!important來指定：io

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .class1 {
            background-color: red  !important;
        }

        .class2 {

            background-color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="navigator" class="class1 class2" > 顯示爲紅色</div>
</body>
</html>

。

對於一開始遇到的問題，有兩種解決方案：

1. 將background-color從#navigator中拿出來，放到一個class .bg中，而.bg放到.current_bg以前：

<html lang="en">
<head>
    <style>
        #navigator {
            position: absolute;

        }

        .bg {
            background-color: red;
        }

        .current_bg {

            background-color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="navigator" class="bg"> 顯示爲紅色</div>
</body>
</html>

須要設置爲#navigator元素指定class="bg"

2. 使用!important:

<html lang="en">
<head>
    <style>
        #navigator {
            position: absolute;
            ackground-color: red;
        }


        .current_bg {

            background-color: green !important;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="navigator" class="current_bg"> 顯示爲綠色</div>
</body>
</html>