CSS3選擇器與聲明優先級

CSS3選擇器與聲明優先級

css全稱

層疊樣式表(Cascading Style Sheets)

css3結構

• 樣式表
  • 規則
    • 選擇器+聲明塊
      • 聲明
        • css屬性和css屬性值組成的鍵值對

瀏覽器讀取編譯css的順序

從右往左

1、選擇器

1.1、基本選擇器

1.1.1、通配符選擇器

*{...}

1.1.2、id選擇器

#[name]{...}

1.1.3、元素選擇器

.[name]{...}

1.1.4、後代選擇器

[name] [name] ...{...}

1.2、基本選擇器拓展

1.2.1、子元素選擇器

[name]>[name]{...}

子元素選擇器相當於直接後代選擇器，不會選擇子元素中的子元素

1.2.2、相鄰兄弟選擇器

[name]+[name]{...}

選擇指定元素的下一個元素，若下一個元素不是指定的元素則無法選中。

1.2.3、通用兄弟選擇器

[name]~[name]{...}

選擇指定元素後的所有同級指定元素

1.2.4、分組選擇器

[name],[name],...{...}

每一個逗號分隔爲一個選擇器，將聲明塊中的所有聲明運用在所有的選擇器中

1.3、屬性選擇器

1.3.1、存在和值屬性選擇器

[attr]：選擇包含attr屬性的所有元素
[attr=val]：選擇包含attr屬性並且值爲val的所有元素
[attr~=val]：選擇包含attr屬性，值是空格分隔的值列表並且其中有val的元素

1.3.2、子串值屬性選擇器

[abc|="def"]：選擇 abc 屬性值等於 def 或以 def- 開頭的所有元素
[abc^="def"]：選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]：選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]：選擇 abc 屬性值中包含子串 "def" 的所有元素

1.4、僞類和僞元素選擇器

1.4.1、僞類

/*在所有子元素中排序*/
:first-child 目標元素是第一個子元素時選中
:last-child 目標元素是最後一個子元素時選中
:nth-child(n) 目標元素是第n個子元素時選中，特殊值如下：
	n：從0到正無窮
	2n或even：偶數位元素
	2n+1或odd：選中奇數位的元素
/*在同類型子元素中排序*/
:first-of-type
:last-of-type
:nth-of-type()

:not() 排除指定的元素

/*連接僞類*/
:link 選擇處於未訪問狀態超鏈接
:visited 選擇處於已訪問狀態超鏈接，只可以修改鏈接的顏色
:target 選擇id爲uri的元素

/*動態僞類*/
:hover 選擇鼠標指針浮動在其上的元素
:active 選擇鼠標按下的元素

1.4.2、僞元素

表示頁面中一些特殊的不真實存在的元素（特殊的位置）

::first-letter 選中第一個字符
::first-line 選中第一行
::selection 選中鼠標選中的文字

::before 元素開始
::after 元素最後 
/*這兩個僞元素必須結合content聲明使用*/

2、選擇器權重

2.1、權重

• 內聯樣式：1000
• id選擇器：100
• 類和僞類選擇器：10
• 元素選擇器：1
• 通配選擇器：0
• 繼承的樣式：沒有優先級

比較優先級時，需要將所有的選擇器的優先級進行相加計算，最後優先級越高，則優先顯示。