CSS 優先順序 偽元素

2021-07-25 04:32:35 字數 1337 閱讀 3332

當我們寫css的時候我們必須注意有些選擇器在級聯(cascade)上會高於其它選擇器,我們寫在最後面的選擇器將不一定會覆蓋前面我們寫在同乙個元素的樣式。那麼你如何計算指定選擇器的優先順序?

1.第乙個數字(a)通常就是0,除非在標籤上使用style屬性;

2.第二個數字(b)是該選擇器上的id的數量的總和;

3.第三個數字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這裡包括class (.example) 和屬性選擇器(比如 li[id=red]);

4.第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等);

5.通用選擇器(*)是0優先順序;

6.如果兩個選擇器有同樣的優先順序,在樣式表中後面的那個起作用。

:target

當你使用錨點(片段識別符號 fragment identifier)的時候,比如, ninety-years-of-inspiration/#comments,這「#comments」就是乙個片段識別符號,你就可以使 用:target偽類來控制目標的樣式。

ui元素狀態偽類

有些html元素有enable 或disabled 狀態(比如,文字輸入框)和 checked 或unchecked 狀態(單選按鈕和核取方塊)。這些狀態就可以使用:enabled、:disabled 或:checked 偽類來分別定位。

否定選擇器

否定選擇器:not(),可以讓你定位不匹配該選擇器的元素

::first-line

::first-line偽元素將匹配block、inline-block、table-caption、table-cell等等級別元素的第一行

::first-letter

::first-letter偽元素將會匹配乙個文字塊的第乙個字母,除非在同一行裡面包含一些其它元素,比如。

::before 和 ::after

::before::after偽元素用於在乙個元素的前面或後面插入內容,純css方法。

::before::after偽元素常常只使用content屬性,來新增一些短語或排版元素

:empty

:empty偽類表示乙個元素裡面沒有任何內容。

CSS 優先順序 偽元素 偽類

優先順序 單冒號 用於css3偽類,雙冒號 用於css3偽元素 偽元素屬性 描述css first letter 向文字的第乙個字母新增特殊樣式 1 first line 向文字的首行新增特殊樣式 1 before 在元素之前新增內容 2 after 在元素之後新增內容2偽類 屬性描述 css ac...

css 選擇器 優先順序 偽類 偽元素

內聯樣式 id 選擇器 類選擇器 屬性選擇器 偽類選擇器 標籤選擇器 偽元素選擇器 如何計算 計算選擇符中 id 選擇器的個數 a 計算選擇符中類選擇器 屬性選擇器以及偽類選擇器的個數之和 b 計算選擇符中標籤選擇器和偽元素選擇器的個數之和 c 按 a b c 的順序依次比較大小,大的則優先順序高,...

CSS 元素層疊優先順序原則

1 static元素之間按html結構順序確定優先順序,元素出現的越晚,優先順序就越高 2 設定position的值為非static值 relative absolute fixed 則元素的優先順序會高於static元素 3 設定position的值為非static值 relative absol...