完整css選擇器總結與優先順序權重

2021-08-07 08:26:49 字數 1197 閱讀 5417

css的選擇器,在前端開發中只是很小的一部分,但其重要性卻不可忽略。因為其比較繁瑣。在看了很多書籍和文章後。我發現選擇器的組織真的很混亂,沒有找到乙個完整的總結。不敢保證我的是否是最完整的,但我已竭盡所能。話不多說,直接看下文:

1.萬用字元選擇器:*            /*鏈結未訪問*/

a:visited{}      /*鏈結已訪問*/

a:hover{}      /*滑鼠移動到鏈結*/

a:active{}      /*選定鏈結*/

a:focus{}      /*聚焦時*/

a:lang{}      /*元素帶有指定lang時*/

a:first-child{}      /*元素在頁面第一次出現時*/

5.偽元素選擇器:a:before{}        /* 在某個元素的前面插入內容*/

a:after{}           /*在某個元素的後面插入內容*/

a:first-line         /*為某個元素的文字首行設定特殊樣式,只能用於塊級元素*/

a:first-letter      /*為某個元素的文字首字母或第乙個字設定樣式,只能用於塊級元素*/

6.復合選擇器(包含以下幾種):

6.1交集選擇器:h3.class名{}            //第乙個必須是標籤選擇器,第二個必須是id或class選擇器

6.2並集選擇器:h1,h2,span{}           //結果是同時選中各個基本選擇器所選擇的範圍。

6.3後代選擇器:p span{}                //用空格分隔開,p標籤之間包含span標籤,外層標籤寫在前面,內層的標記寫在後面,發生巢狀時,內層標記就成了外層標記的後代。

6.4子選擇器:p>span{}                    //只對其直接後代有影響

各類優先順序權重比例如下:

//////構建頁面框架時,通常只給外層標記定義class或者id。

後代選擇器與子選擇的區別:

後代選擇包括在其標籤內部的所有標籤,可以是子標籤,孫子標籤,曾孫子標籤。。。。

子選擇器只對其直接後代有影響,即:只作用於子標籤。

樣式選擇器權重優先順序如下:

important > 內聯樣式 > id > 類 | 偽類 | 屬性選擇 > 標籤 | 偽元素 > 繼承 > 萬用字元

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

CSS選擇器及選擇器優先順序總結

1 元素選擇器 選擇器是元素,例如 p 2 類 class 選擇器 class屬性名,可有重複,乙個元素可有多個class值,用空格隔開。3 id選擇器 id屬性名,不能有重複名字 4 復合選擇器 交集選擇器 可選中同時滿足多個選擇器的元素,例 div.p3 p3 是類名,交集選擇器的兩個選擇器之間...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...