前言：這是筆者學習後自己的理解與整理。如果有錯誤或疑問的地方，請大家指正，我會持續更新！
如果以4位數表示選擇權重，那麼：
#部分屬性選擇器：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 的 #子元素，只往下找一級；子元素選擇器和後代選擇器不太一樣，後代選擇器包含子元素選擇器，並且後代選擇器還會繼續向下查找;
兄弟元素選擇器：
#相鄰兄弟選擇器（IE6及以下不支援），將要分組的選擇器用加號隔開，.wrapper + .content{...}，取得class 為wrapper 的元素之後，緊接著的這一個class 為content 的元素，和一般兄弟選擇器不同的是，相鄰兄弟選擇器只獲當前元素之後取緊接著的這一個元素，後面就算還有相同的，也選擇不到了；
通用兄弟選擇器（IE7及以下不支援），將要分組的選擇器以波浪號隔開，.wrapper ~ .content{...}，取得class為wrapper 的元素之後，所有的 class 為content 的元素，和相鄰兄弟選擇器是不一樣的；
偽類別選擇器（IE8以下不支援）：
:root 選擇文件的根元素，即html 元素；
input:focus，目前input 方塊獲得焦點；
element:hover，滑鼠停留在目前元素上面；
p:nth-of-type(n)，選擇是其父元素的第n 個 p 元素，這個是依照父元素內部的 p 元素的順序計算n ，然後取得的； n 是整數，並且從1開始，也可以是公式，也可以是關鍵字even（偶數）、odd（奇數）；
p:first-of-type，選擇是其父元素的第1 個p 元素，與p:nth-of-type(1) 效果相同;
p:last-of-type，選擇是其父元素的最後一個p 元素，注意前面沒有nth;
p:nth-last -of-type(n)，選擇是其父元素的第n 個p 元素，但是是從最後一個子項往前數，注意前面有nth;
p:nth-child(n)，選擇是其父元素的第n 個子元素，並且得是p 元素，這個是依照父元素內部的子元素的順序計算n ，然後再看第n 個是否為p 元素；這就出現一種情況，第n 個子元素可能不是p ，然後就取得不到了，所以用nth-of-type(n) 會好一點；
#p:first-child，選擇是其父元素的第1 個元素，並且是p 元素，與p:nth-child(1) 相同；
p:last-child，選擇是其父元素的最後一個元素，並且是p 元素；
p:nth-last-child(n)，選擇是其父元素的第n 個子元素，並且得是p 元素，但是是從最後一個子項往前數，注意前面有nth;
還有很多其他的...
偽元素選擇器：
:first-letter，指定一個元素第一個字母的樣式，所有前導標點符號應與第一個字母一同套用該樣式，且只能與區塊級元素關聯;
:first-line，設定元素中第一行文字的樣式，只能與區塊級元素關聯;
:after，IE7及以下不支持，在元素內容的最開始插入生成內容；
:before，IE7及以下不支持，在元素內容的最後插入生成內容；
::selection，匹配被使用者選擇的部分；只支援雙冒號寫法，只支援顏色和背景顏色兩個樣式；
以上是CSS選擇器的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
