css 選擇器

CSS 選擇器

1、經常使用選擇器

1. 元素選擇器 p {}

2. id 選擇器 #name {}

3. class 類選擇器 .box {}

2、複合選擇器

1. 交集選擇器 p.red {} .box.red {}

   選中同時符合多個條件的元素

   注意：交集選擇器中若是有元素選擇器，而元素選擇器必須在開頭

2. 選擇器分組（並集選擇器）h1, p, .box {}

同時選擇多個選擇器對應的元素

3、關係選擇器

1. 子選擇器 .box > p {}

   選中指定父元素的指定子元素（能夠多個）

2. 後代選擇器 .box p {}

   選中指定父元素的指定後代元素（能夠多個）

3. 兄弟選擇器

• p + span {}

  選擇下一個指定的兄弟元素，必須是緊挨着的，並且只能選擇一個

• p ~ span {}

  選擇下邊全部指定的兄弟，被隔開的都能選擇到，是多個

4. 屬性選擇器

• p[屬性名] {} 選擇含有此屬性的元素

• p[屬性名 = 屬性值] {} 選擇含有指定屬性和屬性值的元素

• p[屬性名 ^= 屬性值] {} 選擇屬性值以指定值開頭的元素

• p[屬性名 $= 屬性值] {} 選擇屬性值以指定值結尾的元素

• p[屬性名 *= 屬性值] {} 選擇屬性值中含有某值的元素

4、僞類選擇器

僞類：不存在的類，特殊的類

• 僞類用來描述一個元素的特殊狀態

  例如，第一個子元素，被點擊的元素，鼠標移入的元素。。。

• 僞類通常是 :

  • :first-child 第一個子元素

  • :last-child 最後一個子元素

  • :nth-child() 選中第n個子元素

    特殊值：

    ​ n 第n個 n的範圍 0 ~ +infinity

    ​ 2n 或 even 表示選中偶數位的元素

    ​ 2n+1 或 odd 表示選中奇數位的元素

    注意：是根據全部的子元素進行排序

  • :first-of-type

  • :last-of-type

  • :nth-of-type()

    這些僞類功能和上面的 nth-child() 相似，可是他們是在同類元素中排序

  • :not() 否認僞類

    將符合條件的元素從選擇器中去除

    eg: ur > li:not(:nth-of-type(3)){} 除了第3個 li 的其餘全部 li 元素

• 超連接の僞類

  • a:link 用於表示沒訪問過的連接（正常的連接）

  • a:visited 訪問過的連接

    因爲隱私的問題，全部 visited 這個僞類只能修改連接的顏色

  • a:hover 鼠標移入的狀態

  • a:active 鼠標點擊時的狀態

  注意：link 和 visited 是 a 特有的僞類，而 hover 和 active 是全部元素都有的

5、僞元素選擇器

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

• 僞元素使用 :: 開頭

  • ::first-letter 表示第一個字母

  • ::first-line 表示第一行

  • ::selection 表示選中的內容

  • ::before 元素的開始

  • ::after 元素的最後

    before 和 after 必須結合 content 屬性使用

6、選擇器權重

樣式衝突：當咱們經過不一樣的選擇器，選中相同的元素，而且設置不一樣的樣式，此時有衝突了

因此在樣式衝突發生時，應用哪一個樣式就由選擇器的權重（優先級）決定

選擇器的權重：

• 內聯樣式 1,0,0,0

• id選擇器 0,1,0,0

• 類元素選擇器（包括僞類） 0,0,1,0

• 元素選擇器 0,0,0,1

• 通配選擇器 0,0,0,0 * {}

• 繼承選擇器 沒有優先級

比較優先級時，須要將全部的選擇器的優先級進行相加計算，最後優先級越高，則越優先顯示（分組選擇器單獨計算）

​ 選擇器的累加不會超過其最大的數量級，類選擇器再高也不會超過id選擇器

​ 若是優先級計算後相同，此時則優先使用靠下的樣式（代碼順序解釋）

!important

​ 能夠在某一個樣式後邊加上 !important ，則此時該樣式會取到最高的優先級，甚至超過內聯樣式

​ 注意，在開發中這個要慎用！