1. 程式人生 > >CSS 優先順序 & 偽元素

CSS 優先順序 & 偽元素

CSS 優先順序

當我們寫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.如果兩個選擇器有同樣的優先順序,在樣式表中後面的那個起作用。

CSS 3 偽類

:target
當你使用錨點(片段識別符號 fragment identifier)的時候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus- 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偽類表示一個元素裡面沒有任何內容。