css僞類和僞元素
做爲前端人員，天天要與滿屏的標籤、元素打交道，經過元素與樣式類的結合，呈現出一個個美麗優雅的頁面，其中也包括css僞類和僞元素的應用，隨着前端的發展深刻，開發人員運用愈來愈多的整合技術，使得咱們的工做更快捷高效高逼格，下面就來整理一下css中僞類和僞元素的應用；css
css僞類：html
什麼是css僞類(pseudo-class),僞類就是定義個元素的特殊狀態的存在，這個特殊狀態乍一聽覺得是什麼高科技的玩意，但其實很好理解，好比一個input選框,默認是enable&unchecked，若是是被禁用了被勾選了，就變成特殊狀態了，好吧，給個最容易理解也是官方的案例看看：前端
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/* 未訪問的連接樣式 */
a:link {
color
:
#FF0000
;
}
/* 訪問過的連接樣式 */
a:visited {
color
:
#00FF00
;
}
/* 鼠標滑事後的連接樣式 */
a:hover {
color
:
#FF00FF
;
}
/* 選中的連接樣式 */
a:active {
color
:
#0000FF
;
}
|
如例所示，能夠給元素定義相應的僞元素，而且只有在處於定義狀態的時候纔會生效，調試僞元素的樣式的時候，能夠藉助控制檯調控元素的狀態：jquery
而且僞類能夠和類搭配使用：字體
|
1
2
3
|
a.highlight:hover {
color
:
#ff0000
;
}
|
還有個比較特別的僞元素lang，貌似這個平時用的比較少，就是經過定義不一樣的lang類型來定義樣式：ui
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
q:lang(en) {
color:red
}
</
style
>
</
head
>
<
body
>
<
p
>呵呵<
q
lang
=
"en"
>嘿嘿</
q
>哈哈</
p
>
</
body
>
</
html
>
|
就是下面的效果：url
固然css僞元素不止這些，寫法也多種多樣，不過通常經常使用的也只有前幾個，下面是整理到的css僞類；spa
css 僞類集合：3d
| 僞類 | 例子 | 描述 |
|---|---|---|
| :active | a:active | 選中狀態 |
| :checked | input:checked | 勾選狀態 |
| :disabled | input:disabled | 禁用狀態 |
| :empty | p:empty | p元素無子元素 |
| :enabled | input:enabled | 激活狀態 |
| :first-child | p:first-child | 父級下的第一個p元素 |
| :first-of-type | p:first-of-type | 父級下第一個p類型元素 |
| :focus | input:focus | 選中狀態，光標位於當前 |
| :hover | a:hover | hover狀態 |
| :in-range | input:in-range | 定義在一段範圍內的值的input |
| :invalid | input:invalid | 全部符合驗證條件的元素 |
| :lang(language) | p:lang(it) | 經過lang(it)來定義的p |
| :last-child | p:last-child | 父級下的最後一個p元素 |
| :last-of-type | p:last-of-type | 父級下最後一個p類型元素 |
| :link | a:link | 未訪問的連接 |
| :not(selector) | :not(p) | 非p元素 |
| :nth-child(n) | p:nth-child(2) | 父級下的第n個p元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 父級下的倒數第二個元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 父級的第二個p元素，從最後一個子元素算起 |
| :nth-of-type(n) | p:nth-of-type(2) | 其父級的第二個子元素 |
| :only-of-type | p:only-of-type | 當p是其父級的惟一元素類型 |
| :only-child | p:only-child | 當p是其父級的惟一元素 |
| :optional | input:optional | 沒有「required」標示的input |
| :out-of-range | input:out-of-range | 不在特定值範圍的input |
| :read-only | input:read-only | 帶有「readonly」標示的input |
| :read-write | input:read-write | 沒有有「readonly」標示的input |
| :required | input:required | 帶有「required」標示的input |
| :root | root | 頁面根元素 |
| :target | #news:target | 選擇的元素錨點 |
| :valid | input:valid | 符合驗證的元素 |
| :visited | a:visited | 訪問過的 |
其實仍是蠻多的哈，不過確實通常開發中經常使用的只有幾種，反正我是沒用完，能達到預想中的開發效果就行，沒必要強制追求的，有時候還能夠配合jquery進行css操做，寫法也很簡便；調試
接下來看一下僞元素(pseudo-element)，瞭解過僞類的定義後，就更好理解僞元素了，css僞元素就是定義元素"一部分"的特殊樣式，好比定義元素的第一個字符，第一行，在元素的before、after、center中定義內容；語法以下：
|
1
2
3
|
selector::pseudo-element {
property:value;
}
|
好比定義一個p的第一行：
|
1
2
3
|
p::first-line {
color
:
#ff0000
;
}
|
向一個元素前或者元素後插入部份內容：
|
1
2
3
|
i::before {
content
:
url
(pic.gif);
}
|
這種方式常配合字體圖標出如今網頁中，以一個元素做爲載體，將字體圖標加入到元素區域顯示,如圖所示：
僞元素很少卻應用普遍，意思也好懂，示例以下：
| 僞元素 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | p元素後插入內容 |
| ::before | p::before | p元素前插入內容 |
| ::first-letter | p::first-letter | p元素中第一個字符 |
| ::first-line | p::first-line | 第一行 |
| ::selection | p::selection | 用戶選中區域 |
原文地址：http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/
- 1. CSS僞類和僞元素
- 2. css—僞類和僞元素
- 3. CSS 僞類與僞元素
- 4. CSS僞類與僞元素
- 5. css僞類與僞元素
- 6. CSS 僞類 僞元素
- 7. CSS——僞元素與僞類
- 8. 【CSS】僞類與僞元素
- 9. css僞類和僞元素的學習
- 10. 細說CSS僞類和僞元素
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 如何僞造ARP響應？ - TCP/IP教程
- • Kotlin學習（二）基本類型
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS僞類和僞元素
- 2. css—僞類和僞元素
- 3. CSS 僞類與僞元素
- 4. CSS僞類與僞元素
- 5. css僞類與僞元素
- 6. CSS 僞類 僞元素
- 7. CSS——僞元素與僞類
- 8. 【CSS】僞類與僞元素
- 9. css僞類和僞元素的學習
- 10. 細說CSS僞類和僞元素