偽類: Pseudo-classes
- 定義: 在CSS中，偽類選擇器根據(jù)元素的狀態(tài)而不是文檔樹中的信息來為其指定目標(biāo)胰锌。(源自:MDN文檔)
- 作用: 向某些選擇器添加特殊的效果
- 語法: E: link | visited | ... { property: value;}
文檔關(guān)鍵字解讀
根據(jù)元素的狀態(tài)
文檔關(guān)鍵詞中有:"根據(jù)"這個詞,這就意味著 偽類 自帶一種 "被動光環(huán)",
也就是說 它不會主動觸發(fā), 只有當(dāng)某種條件成立以后,才會'被迫'出來清掃戰(zhàn)場 -> 也就是 呈現(xiàn)某種狀態(tài).
下面是所有偽類的清單圖: (來源鏈接:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
11122.png
上面MDN文檔 毫無人性 的把所有 偽類 從A-Z 給羅列出來,
讓人 不明覺厲,進(jìn)而讓人 敬而遠(yuǎn)之. 但是么得關(guān)系,
我們可以運(yùn)用 | 真·分類無雙 | 卍大法 來給它送上愛心SM套餐.
- [ ] 注: 以下分類是按 常用度 重要度 來分先后順序.
靜態(tài)偽類: 用于超鏈接樣式 比如a標(biāo)簽
a: link { ...} /* 超鏈接點(diǎn)擊 之前 的元素樣式 */
a: visited {...} /* 被訪問過 之后 的元素樣式 */
動態(tài)偽類: 所有標(biāo)簽都適用的樣式
E: hover {...} /* 鼠標(biāo)放到標(biāo)簽上的時候 */
E: active {...} /* 鼠標(biāo)點(diǎn)擊標(biāo)簽衩茸，但是不松手時 */
E: focus {...} /* 是某個標(biāo)簽獲得焦點(diǎn)時的樣式（比如某個輸入框獲得焦點(diǎn)） */
注意:
- 如果一個元素同時有: link , visited , hover , active 的順序是固定的,不能亂來. 因?yàn)樗麄冎g存在 邏輯先后,不能更改.
- a:link芹血、a:visited這兩個偽類的時候，要么同時寫楞慈，要么同時不寫幔烛。如果只寫a屬性和a:link屬性，不規(guī)范囊蓝。
結(jié)構(gòu)偽類: 用于匹配指定的目標(biāo)子元素
E: nth-child(n) {...} /* 匹配屬于E父元素的第 N (大于等于1的整數(shù)) 個子元素饿悬，不論元素的類型
匹配步驟解析:① 根據(jù)E自身->通過DOM樹定位到父元素.
② 其父元素掃描自己的所有子元素(不分類型),給他們按順序從1開始編號.
③ 在依據(jù)(n)的值,尋找到編號為n的子元素
*/
E: nth-last-child(n) {...} /* 匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型聚霜，從最后一個子元素開始計(jì)數(shù)
與上面nth:child邏輯步驟相同,只不過倒過來而已.
*/
E:nth-of-type(n) {...} /* 匹配屬于父元素的特定類型的 第N個 子元素的 每個元素(如果有多個父容器) */
E:nth-last-of-type(n) {...} /* 匹配屬于父元素的特定類型的第 N 個子元素的每個元素狡恬，從最后一個子元素開始計(jì)數(shù) */
E:first-child {...} /* 匹配屬于 其父元素 的首個子元素的指定選擇器 */
E:last-child {...} /* 匹配屬于 其父元素 的最后一個子元素的每個元素 */
E:only-child {...} /* 匹配屬于 其父元素 的 唯一 子元素的每個元素(也就是 所有父容器 下符合E元素類型 且 只有一個'獨(dú)苗') */
E:first-of-type {...} /* 匹配屬于 其父元素 下跟元素E type類型一致的首個子元素(可以是多個,如果有多個父容器) */
E:last-of-type {...} /* 匹配屬于 其父元素 下跟元素E type類型一致的 倒數(shù)最后一個的子元素(可以是多個,如果有多個父容器) */
E:only-of-type {...} /* 匹配屬于其父元素的特定類型的唯一子元素的每個元素(父容器下可以有多個子元素,但符合E type類型的子元素只有一個) */
E:empty {...} /* 選擇沒有子元素的元素，且不包含節(jié)點(diǎn), 也就是空殼標(biāo)簽 */
E:root {...} /* 匹配元素所有在文檔的根元素 也就是 html標(biāo)簽,一般很少用到 */
否定偽類: 用來匹配 非指定 元素/選擇器的每個元素
E:not(selector) {...} /* 選中E標(biāo)簽或容器下的符合selector標(biāo)記的所有元素 */
目標(biāo)偽類: 用來匹配頁面URI
(標(biāo)識蝎宇、定位任何資源的字符串)中某一個標(biāo)識符的目標(biāo)元素
E: target { ... } /* 選擇匹配E的所有元素弟劲，且匹配元素被相關(guān)URL指向 */
語言偽類: 用來匹配使用指定語言的元素
E:lang(language){ ... } /* 向帶有指定 lang 屬性開始的元素添加樣式 ,使用頻率低 */
偽元素: Pseudo-elements
- 定義: CSS偽元素是添加到選擇器的關(guān)鍵字，可用于設(shè)置所選元素的特定部分的樣式姥芥。(源自:MDN文檔)
- 作用: 用于設(shè)置所選元素的特定部分的樣式
- 語法: selector::pseudo-element {property: value;}
文檔關(guān)鍵字解讀
**添加/設(shè)置所選元素特定部分 **
文檔關(guān)鍵詞中有:"添加/設(shè)置"這個詞,這就表示 偽元素是一種 "增量 或 元素本來就有的一部分.""
也就是說 把 元素當(dāng)做一個 可操作的物體,可以給這個物體附著新零件 或 拆出部分零件來修理-->進(jìn)行樣式設(shè)置.
下面是所有偽類的清單圖: (來源鏈接:下面是所有偽類的清單圖: (來源鏈接:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes))
22221111.png
下面介紹幾個常用的:
- 注意 偽元素是css3新增的功能選擇器, 最好選擇器 和 偽類元素 需用 兩個 : 隔開,才符合規(guī)范.
E::after | ::before { ... } /* 用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容兔乞。
這些添加不會出現(xiàn)在DOM中，不會改變文檔內(nèi)容，不可復(fù)制庸追，僅僅是在css渲染層加入 ,所以盡量使用它們顯示修飾性內(nèi)容
常用來 清除浮動*/
E::selection { ... } /* 應(yīng)用于文檔中被用戶選中高亮的部分(比如鼠標(biāo)劃選的文字) */
E::first-letter { ... } /* 選中整塊文字第一行的第一個字(中英文皆可), 且文字之前沒有其他內(nèi)容,
E::first-line { ... } /* 將樣式只應(yīng)用于元素的首行 */
