css選擇器詳解

時間 2019-11-17

標籤 css 選擇器詳解欄目 CSS 简体版

原文原文鏈接

原文：https://www.cnblogs.com/zxjwlh/p/6213239.html

CSS三大特性—— 繼承、優先級和層疊。

繼承：即子類元素繼承父類的樣式;css

優先級：是指不一樣類別樣式的權重比較;html

層疊：是說當數量相同時，經過層疊(後者覆蓋前者)的樣式。算法

css選擇符分類　　

首先來看一下css選擇符(css選擇器)有哪些?瀏覽器

　　1.標籤選擇器(如：body,div,p,ul,li)

　　2.類選擇器(如：class="head",class="head_logo")

　　3.ID選擇器(如：id="name",id="name_txt")

　　4.全局選擇器(如：*號)

　　5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)

　　6.後代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)

　　7.羣組選擇器 div,span,img {color:Red} 即具備相一樣式的標籤分組顯示

　　8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)

　　9.僞類選擇器(如：就是連接樣式,a元素的僞類，4種不一樣的狀態：link、visited、active、hover。)

　　10.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

　　11.子選擇器 (如：div>p ,帶大於號>)

　　12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)模塊化

css優先級

當兩個規則都做用到了同一個html元素上時，若是定義的屬性有衝突，那麼應該用誰的值的，CSS有一套優先級的定義。組件化

不一樣級別spa

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
做爲style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
通配符選擇器
瀏覽器自定義或繼承

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性.net

同一級別code

同一級別中後寫的會覆蓋先寫的樣式htm

上面的級別仍是很容易看懂的，可是有時候有些規則是多個級別的組合，像這樣

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

到底div是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際並非按十進制，用數字表示只是說明思想，一萬個class也不如一個id權值高）

內聯樣式表的權值爲 1000
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1

咱們能夠把選擇器中規則對應作加法，比較權值，若是權值相同那就後面的覆蓋前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，因此div會應用.test1 .test2變成綠色

另一種理解方式：

　　CSS優先級：是由四個級別和各級別的出現次數決定的。

　　四個級別分別爲：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

　　優先級的算法：

　　每一個規則對應一個初始"四位數"：0、0、0、0

　　如果行內選擇符，則加一、0、0、0

　　如果 ID選擇符，則加0、一、0、0

　　如果類選擇符/屬性選擇符/僞類選擇符，則分別加0、0、一、0

　　如果元素選擇符/僞元素選擇符，則分別加0、0、0、1

　　算法：將每條規則中，選擇符對應的數相加後獲得的」四位數「，從左到右進行比較，大的優先級越高。　　

需注意的：

　　①、!important的優先級是最高的，但出現衝突時則需比較」四位數「;

　　②、優先級相同時，則採用就近原則，選擇最後出現的樣式;

　　③、繼承得來的屬性，其優先級最低;

　　!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

　　*css選擇器使用強烈建議採用低權重原則，利於充分發揮css的繼承性，複用性，模塊化、組件化。