CSS:CSS選擇器之【偽類/元素選擇器】
前言
目前為止,我們已經學習瞭如何使用HTML文件中定義的元素選擇文件的內容。CSS中還定義了偽選擇器,它們提供了更復雜的功能,但非直接對應HTML文件應以的元素。偽選擇器主要分兩種:偽元素和偽類。
偽元素選擇器
該類選擇器主要用於向指定的選擇器新增指定的效果。
:first-letter
選擇“塊級元素”文字段落中的首個字元,只能對“塊級元素”生效。
該選擇器可以設定的值有:
font屬性
color屬性
background屬性
margin屬性
padding屬性
border屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
float屬性
clear屬性
使用示例如下:
p: first-letter {
border: 2px solid black;
color: blue;
border-radius: 5px;
padding: 5px;
}
:first-line
選擇“塊級元素”文字段落中的首行文字,只能對“塊級元素”生效。
該選擇器可以設定的值有:
font屬性
color屬性
background屬性
word-spacing屬性
letter-spacing屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
clear屬性
使用示例如下:
p: first-line {
border: 2px solid black;
letter-spacing: 5px;
color: blue;
}
:before
在指定的選擇器之前插入一段內容。插入的內容預設為“行內元素”,可以通過“display”強制轉換顯示型別。
程式碼示例:
/*插入文字*/
p:before {
content: "插入文字";
color: red;
}
/*插入圖片*/
div:before {
content : url(../img.jpg);
width: 100px;
height: 100px;
}
:after
在指定的選擇器之後插入一段內容,使用方式和“:before”一樣。插入的內容預設也是為“行內元素”,同樣可以通過“display”強制轉換顯示型別。程式碼示例同“:before”。
提示:使用“:before”和“:after”偽元素選擇器不僅能為指定的元素新增文字、圖片和各種利用“width”、“height”、“border”製作出來的形狀,甚至還能新增音訊、視訊這些多媒體檔案,而且具有高度自定義性。
偽類選擇器
偽類選擇器和其它選擇器有所不同,它是通過觸發一定的“事件”來實現效果,也就是說如果不進行任何操作是看不到該選擇器的CSS樣式設定的。
動態偽類選擇器
之所以稱為動態偽類選擇器,是因為它們根據條件的改變匹配元素,是相對於文件的固定狀態來說的。隨著JavaScript廣泛用於修改文件內容和元素狀態,動態選擇器和靜態選擇器之間的界限越來越模糊,不過,動態偽類選擇器仍然是一類比較特別的選擇器。
:link 和:visited 選擇器
:link選擇器匹配超連結,:visited選擇器匹配使用者已經訪問過得超連結。
使用:visited選擇器可以應用到連結元素的屬性不多。你可以改變顏色和字型,不過僅此而已。
提示::visited選擇器匹配使用者在所有頁面訪問過的href屬性為URL的任意連結,而不只是你的頁面。:visited最常見的用法就是針對已訪問的連結應用某種樣式,從而讓它們跟未訪問的連結有所區別。比如我們看新聞,看過的新聞和沒有看過的新聞在首頁列表呈現的狀態是不一樣的,便於我們區分。
:hover 選擇器
:hover選擇器匹配使用者滑鼠懸停在其上的任意元素。
:active 選擇器
:active選擇器匹配當前被使用者啟用的元素(一般情況下為滑鼠點選該元素)。
:focus 選擇器
:focus選擇器匹配獲得焦點的元素,常用於 input 元素。
結構性偽類選擇器
使用結構性偽類選擇器能夠根據元素在文件中的位置選擇元素。這類選擇器都有一個冒號字元字首(:),例如:empty。他們可以單獨使用,也可以跟其他選擇器組合使用,如p:empty。
使用:root 選擇器(根元素選擇器)
:root 選擇器匹配文件中的根元素。它可能是用得最少的一個偽類選擇器,因為總是返回html元素,一般不用。
使用子元素選擇器
使用子元素選擇器匹配直接包含在其他元素中的單個元素。下方列表簡單的總結了這類選擇器:
選擇器 | 說明 |
---|---|
:first-child | 選擇元素的第一個子元素 |
:last-child | 選擇元素的最後一個子元素 |
:only-child | 選擇元素的唯一子元素 |
:only-of-type | 選擇元素制定型別的唯一子元素 |
使用nth-child選擇器
:nth-child選擇器跟上一節講的子元素選擇器類似,但使用這類選擇器可以制定一個索引以匹配特定位置的元素。下方列表簡單的總結了這類選擇器:
選擇器 | 說明 |
---|---|
:nth-child(n) | 選擇父元素的第n個子元素 |
:nth-last-child | 選擇父元素的倒數第n個子元素 |
:nth-of-type(n) | 選擇父元素定義型別的第n個子元素 |
:nth-last-of-type(n) | 選擇父元素定義型別的倒數第n個子元素 |
UI元素狀態偽類選擇器
使用UI偽類選擇器可以根據元素的狀態匹配元素,下方列表將簡單總結這類選擇器:
選擇器 | 說明 |
---|---|
:enabled | 選擇啟用狀態的元素 |
:disabled | 選擇禁用狀態的元素 |
:checked | 選擇被選中的input元素(只用於單選按鈕和複選框) |
:default | 選擇預設元素 |
:valid | 根據輸入驗證選擇有效或者無效的input元素 |
:in-range/:out-of-range | 選擇在制定範圍之內或者職位受限的input元素 |
:required/:optional | 根據是否允許:required屬性選擇input元素 |