簡單概括一下CSS的選擇器
基本選擇器
| * | 通配符選擇器 | 選擇所有元素 |
|---|---|---|
| E | 元素選擇器 | 文檔元素 |
| .class | 類選擇器 | 選擇一個類下的所有元素 |
| #id | ID選擇器 | 選擇一個id下的所有元素 |
| E F | 后代選擇器 | 可以選擇某個元素的后代元素 |
| E > F | 子元素選擇器 | 選擇直接的子元素(不包含后代元素) |
| E + F | 相鄰兄弟元素選擇器 | 選擇緊接一個元素后的元素(在 e,f具有相同的父元素,且相鄰) |
| E ~ F | 通用兄弟元素選擇器 | 選擇相鄰元素后的所有元素 |
屬性選擇器
| E[attr] | 篩選具有attr屬性的元素 |
|---|---|
| E[attr="value"] | 篩選具有attr屬性,且該屬性的值為value的元素 |
| E[attr~="value"] | 屬性值為用空格分隔的字詞列表涡拘，其中一個等于value的元素(包含只有一個值且該值等于val的情況) |
| E[attr^="value"] | 篩選attr屬性值以value開頭的元素 |
| E[attr$="value"] | 篩選attr屬性值以value結(jié)尾的元素 |
| E[attr*="value"] | 篩選attr屬性值中包含value的元素 |
| E[attr|="value"] | 篩選attr屬性值以val開頭并且其后緊跟著 “-” 的元素 |
偽類選擇器
動態(tài)偽類
常用的四個錨點偽類
| :link | 選取未被訪問的鏈接 |
|---|---|
| :hover | 用于當(dāng)用戶把鼠標(biāo)移動到元素上面時的效果 |
| :active | 用于用戶點擊元素那一下的效果 |
| :focus | 用于元素成為焦點(表單元素上常用) |
UI元素狀態(tài)偽類
-
:enabled與：disabled
表單元素中的可用與不可用的兩種狀態(tài)
-
:checked
狀態(tài)選擇器
PS:IE6至IE8均不支持以上三種選擇器
nth選擇器
CSS3結(jié)構(gòu)類,CSS的新特性,一種支持變量計算的選擇器,可以實現(xiàn)復(fù)雜的選擇需求
| :first-child | 選擇某個元素的第一個子元素 |
|---|---|
| :last-child | 選擇某個元素的最后一個子元素 |
| :nth-child() | 選擇某個元素的一個或多個特定的子元素 |
| :nth-last-child() | 選擇某個元素的一個或多個特定的子元素蜈项，從這個元素的最后一個子元素開始算 |
| :nth-of-type() | 選擇指定的元素 |
| :nth-last-of-type() | 選擇指定的元素，從元素的最后一個開始計算 |
| :first-of-type | 選擇一個上級元素下的第一個同類子元素 |
| :last-of-type | 選擇一個上級元素的最后一個同類子元素 |
| :only-child | 選擇的元素是它的父元素的唯一一個了元素 |
| :only-of-type | 選擇一個元素是它的上級元素的唯一一個相同類型的子元素 |
| :empty | 選擇的元素里面沒有任何內(nèi)容 |
否定選擇器
:not, 選擇器匹配非指定元素/選擇器的每個元素名党。
PS:IE6-8不支持
偽元素
| ::first-line | 選擇元素的第一行 |
|---|---|
| ::first-letter | 選擇文本塊的第一個字母 |
| ::before | 在元素前插入內(nèi)容 |
| ::after | 在元素后插入內(nèi)容 |
| ::selection | 用來改變?yōu)g覽網(wǎng)頁選中文的默認效果 |
PS:CSS3中用兩個":"代表偽元素,若同時想兼容老的瀏覽器,最好還是使用一個":",但像CSS3的新偽元素(如::selection)還是要用來兩冒號
