CSS選擇器的簡單介紹

前言：這是筆者學習後自己的理解與整理。如果有錯誤或疑問的地方，請大家指正，我會持續更新！

 

選擇器權重

　　如果以4位數表示選擇權重，那麼：

• 元素選擇器的權重是1;

• id ​​選擇器的權重為100;

• ## class類別選擇器的權重為10；

• #內嵌style（

  JS操作的也是行間樣式）的權重為1000;

• 當然如果某屬性值設定了！ important ,它還是最重要的，直接通殺；

 

CSS選擇器 #簡介：

• 通配選擇器，*{...}，星號代表通配選擇器，可以與任何元素相符；

• 元素選擇器，html{...}，body{...}，p{...}，文件的元素是最基本的選擇器，元素選擇器;

• id ​​選擇器，#value，為元素設定一個id 屬性，值為value；

• class 類別選擇器，.value {...}，為元素設定一個class 屬性，值為value；

• #屬性選擇器

  ，屬性選擇器根據元素的屬性及屬性值來選擇元素，有很多種：

1. 簡單屬性選擇器：img[title]，取得設定了alt屬性的img元素；#wrapper[outter]，取得id 為wrapper 且具有屬性wrapper 的元素；

2. 具體屬性選擇器：input[type="button"]，取得屬性值button 的input 元素；#wrapper[outter= "abc"]，取得id 為wrapper 且屬性outter的值為abc 的元素；

3. #部分屬性選擇器：p[class ^="a"]，取得class 屬性值以a 為開頭的p 元素；p[class $="b"]，取得class 屬性值以b 為結尾的p 元素;

• ##分組選擇器，將要分組的選擇器用逗號隔開；#wrapper , #content{...}，取得id 為wrapper 的元素，和id 為content 的元素，兩個都取得；

• 後代選擇器，將要分組的選擇器用空格隔開，#wrapper #content{...}，在id 為wrapper 的元素物件內部，取得id 為content 的元素，可能是子元素，也可能是子孫元素；

• 子元素選擇器，將要分組的選擇器以大於號隔開，#wrapper > #content{...}，在id 為wrapper 的元素物件內部，取得id 為content 的 #子元素，只往下找一級；子元素選擇器和後代選擇器不太一樣，後代選擇器包含子元素選擇器，並且後代選擇器還會繼續向下查找;

• 兄弟元素選擇器：

1. #相鄰兄弟選擇器（IE6及以下不支援），將要分組的選擇器用加號隔開，.wrapper + .content{...}，取得class 為wrapper 的元素之後，緊接著的這一個class 為content 的元素，和一般兄弟選擇器不同的是，相鄰兄弟選擇器只獲當前元素之後取緊接著的這一個元素，後面就算還有相同的，也選擇不到了；

2. 通用兄弟選擇器（IE7及以下不支援），將要分組的選擇器以波浪號隔開，.wrapper ~ .content{...}，取得class為wrapper 的元素之後，所有的 class 為content 的元素，和相鄰兄弟選擇器是不一樣的；

• 偽類別選擇器（IE8以下不支援）：

1. :root 選擇文件的根元素，即html 元素；

2. input:focus，目前input 方塊獲得焦點；

3. element:hover，滑鼠停留在目前元素上面；

4. p:nth-of-type(n)，選擇是其父元素的第n 個 p 元素，這個是依照父元素內部的 p 元素的順序計算n ，然後取得的； n 是整數，並且從1開始，也可以是公式，也可以是關鍵字even（偶數）、odd（奇數）；

5. p:first-of-type，選擇是其父元素的第1 個p 元素，與p:nth-of-type(1) 效果相同;

6. p:last-of-type，選擇是其父元素的最後一個p 元素，注意前面沒有nth;

7. p:nth-last -of-type(n)，選擇是其父元素的第n 個p 元素，但是是從最後一個子項往前數，注意前面有nth;

8. p:nth-child(n)，選擇是其父元素的第n 個子元素，並且得是p 元素，這個是依照父元素內部的子元素的順序計算n ，然後再看第n 個是否為p 元素；這就出現一種情況，第n 個子元素可能不是p ，然後就取得不到了，所以用nth-of-type(n) 會好一點；

9. #p:first-child，選擇是其父元素的第1 個元素，並且是p 元素，與p:nth-child(1) 相同；

10. p:last-child，選擇是其父元素的最後一個元素，並且是p 元素；

11. p:nth-last-child(n)，選擇是其父元素的第n 個子元素，並且得是p 元素，但是是從最後一個子項往前數，注意前面有nth;

12. 還有很多其他的...

• 偽元素選擇器：

1. :first-letter，指定一個元素第一個字母的樣式，所有前導標點符號應與第一個字母一同套用該樣式，且只能與區塊級元素關聯;

2. :first-line，設定元素中第一行文字的樣式，只能與區塊級元素關聯;

3. :after，IE7及以下不支持，在元素內容的最開始插入生成內容；

4. :before，IE7及以下不支持，在元素內容的最後插入生成內容；

5. ::selection，匹配被使用者選擇的部分；只支援雙冒號寫法，只支援顏色和背景顏色兩個樣式；

#

以上是CSS選擇器的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！