【重识 HTML + CSS】CSS 伪类、伪元素

布满荆棘的人生 2022-10-14 10:59 280阅读 0赞

### CSS 伪类、伪元素 ###

*  伪类 (pseudo-classes)
 *  动态伪类 (dynamic pseudo-classes)
 *   *  :link、:visited、:hover、:active
     *  :focus
 *  目标伪类 :target
 *  语言伪类 :lang
 *  元素状态伪类 :enable、:disable、:checked
 *  结构伪类 (structural pseudo-classes)
 *   *  :nth-child()、:nth-last-child()
     *  :nth-of-type()、:nth-last-of-type()
     *  :empty
     *  等价描述
 *  否定伪类 :not()
 *  伪元素 (pseudo-elements)
 *   *  ::first-line 对首行文本设置属性
     *  ::first-letter 对首字母设置属性
     *  ::before、::after 在元素内容之前、之后插入其他内容

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

本章 Gitee 代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day04][https_gitee.com_szluyu99_html_css_note_tree_master_day04]

# 伪类 (pseudo-classes) #

常见的伪类有：

*  **动态伪类** (dynamic pseudo-classes)  
    `:link`、`:visited`、`:hover`、`:active`、`:focus`
 *  **目标伪类** (target pseudo-classes)  
    `:target`
 *  **语言伪类** (language pseudo-classes)  
    `:lang()`
 *  元素状态伪类 (UI element states pseudo-classes)  
    `:enabled`、`:disabled`、`:checked`
 *  结构伪类 (structural pseudo-classes)  
    `:nth-child( )`、`:nth-last-child( )`、`:nth-of-type( )`、`:nth-last-of-type( )`  
    `:first-child`、`:last-child`、`:first-of-type`、`:last-of-type`  
    `:root`、`:only-child`、`:only-of-type`、`:empty`
 *  否定伪类 (negation pseudo-classes)  
    `:not()`

# 动态伪类 (dynamic pseudo-classes) #

动态伪类的细节：直接给 a 元素设置样式，相当于给 a 元素的所有动态伪类都设置

*  下图效果相当于：`a:link`、`a:visited`、`a:hover`、`a:active`、`a:focus` 的 color 都是 red  
    ![在这里插入图片描述][20210521134429762.png]

## :link、:visited、:hover、:active ##

使用举例：

*  `a:link`：未访问的链接
 *  `a:visited`：已访问的链接
 *  `a:hover`：鼠标挪动到链接上
 *  `a:active`：激活的链接（鼠标在链接上长按住未松开）

使用注意：**动态伪类的使用是有顺序的，因为后面的样式会覆盖前面的样式**

*  `:hover` 必须放在 `:link` 和 `:visited` 后面才能完全生效
 *  `:active` 必须放在 `:hover` 后面才能完全生效
 *  建议的编写顺序：`:link`、`:visited`、`:hover`、`:active`

> 除了 a 元素，`:hover`、`:active` 也能用在其他元素上

## :focus ##

`:focus` 指当前拥有输入焦点的元素（能接收键盘输入）

> 动态伪类编写顺序：`:link`、`:visited`、`:focus`、`:hover`、`:active`

效果示例：

*  文本输入框一聚焦后，背景就会变红色：  
    ![在这里插入图片描述][20210521133243466.png]
 *  因为链接 a 元素可以被键盘的 Tab 键选中聚焦，所以 `:focus` 也适用于 a 元素  
    ![在这里插入图片描述][20210521133319636.png]
 *  去除 a 元素默认的 `:focus` 效果：  
    ![在这里插入图片描述][20210521133621450.png]

> **设定元素不会被 TAB 选中**，可以将 [tabindex][] 属性设置为 `-1`

# 目标伪类 :target #

目标伪类：当元素被锚点链接当作目标跳转之后起作用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

# 语言伪类 :lang #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

# 元素状态伪类 :enable、:disable、:checked #

`:enabled`：启用状态

`:disabled`：禁用状态

`:checked`：被选中状态

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]

# 结构伪类 (structural pseudo-classes) #

## :nth-child()、:nth-last-child() ##

用法：`nth-child(an + b)`  
`nth-child(1)`：父元素中的第1个子元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

*  `:nth-child(2n)`：父元素中第偶数个子元素  
    等价于 `nth-child(even)`
 *  `:nth-child(2n + 1)`：父元素中的第奇数个子元素  
    等价于 `:nth-child(odd)`
 *  `:nth-child(-n + 2)`：父元素中最前面 2 个子元素

`nth-last-child()` 语法跟 `:nth-child()` 类似，不同点是 `:nth-last-child()` 从最后一个子元素开始往前计数

*  `:nth-last-child(1)`：倒数第一个子元素
 *  `:nth-last-child(-n + 2)`：最后 2 个子元素

--------------------

思考：如何表示第 2 个 ~ 倒数第 2 个元素（去除头和尾元素）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

## :nth-of-type()、:nth-last-of-type() ##

`:nth-of-type()` 用法跟 `:nth-child()` 类似

*  不同点是 `:nth-of-type()` 计数时只计算同种类型的元素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]  
    `:nth-last-of-type()` 用法跟 `:nth-of-type()` 类似
 *  不同点是 `:nth-last-of-type()` 从最后一个这种类型的子元素开始往前计数

## :empty ##

`:empty` 代表里面完全空白的元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]

## 等价描述 ##

*  `:first-child` 等同于 `:nth-child(1)`
 *  `:last-child` 等同于 `:nth-last-child(1)`
 *  `:first-of-type` 等同于 `:nth-of-type(1)`
 *  `:last-of-type` 等同于 `:nth-last-of-type(1)`
 *  `:only-child` 是父元素中唯一的子元素  
    等同于 `:first-child:last-child` 或者 `:nth-child(1):nth-last-child(1)`
 *  `:only-of-type` 是父元素中唯一的这种类型的子元素  
    等同于 `first-of-type:last-of-type` 或者 `:nth-of-type(1):nth-last-of-type(1)`
 *  `:root`根元素就是 HTML 元素

# 否定伪类 :not() #

`:not()` 的格式是 `:not(x)`

*  `x` 是一个简单选择器  
    元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
 *  `:not(x)` 表示除 x 以外的元素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]

> `:not()` 支持简单选择器，不支持组合。比如下面的写法是不支持的  
> ![在这里插入图片描述][20210526230102682.png]

# 伪元素 (pseudo-elements) #

常用的伪元素有：

*  `:first-line`、`::first-line`
 *  `:first-letter`、`::first-letter`
 *  `:before`、`::before`
 *  `:after`、`::after`

> 为了区分伪元素和伪类，建议伪元素使用 2 个冒号，比如 `::first-line`

## ::first-line 对首行文本设置属性 ##

`::first-line` 可以针对首行文本设置属性  
![在这里插入图片描述][20210526232726403.png]  
只有下列属性可以应用在 `::first-line` 伪元素

*  字体属性、颜色属性、背景属性
 *  `word-spacing`、`letter-spacing`、`text-decoration`、`text-transform`、`line-height`

## ::first-letter 对首字母设置属性 ##

`::first-letter` 可以针对首字母设置属性  
![在这里插入图片描述][20210526232928794.png]  
只有下列属性可以应用在 `::first-letter` 伪元素：

*  字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
 *  text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）

## ::before、::after 在元素内容之前、之后插入其他内容 ##

`::before` 和 `::after` 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]  
在 CSS 属性值中，使用 `url(图片的URL)` 来引用图片：

*  `url(dot.png);`
 *  `url('dot.png');`
 *  `url("dot.png");`，建议使用这种

--------------------

在 `content` 中，还可以使用 `attr(属性名)` 来获得元素的属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day04]: https://gitee.com/szluyu99/html_css_note/tree/master/day04
[20210521134429762.png]: /images/20221014/dc2feebfe96d4c03b8b034f2d7a909e9.png
[20210521133243466.png]: /images/20221014/b5b029633fa047ff9a77ed9934d8f1be.png
[20210521133319636.png]: /images/20221014/0904f81dbef84f3ba0bd48f01716300b.png
[20210521133621450.png]: /images/20221014/a7cde1d1fc0a4b048f431970cf6f612e.png
[tabindex]: https://blog.csdn.net/weixin_43734095/article/details/116947115#CSS____348
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/1114142e08e64f539bd3607535210a59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/21365932593f4dbc96f331c7a0facde1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/8bdd8a6ba94c43d0994587333f800794.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/a054cc5bff674ff5be788d7d672e32ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221014/534dd15287e64f2cb1f55c1c6915d615.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/cfa89f81367047cd81a1edf4b3aab6b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/28e42d0098524ed5bfe294dafa09fa42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/da7a6873ced54dcdb3bf843599873710.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/a608dbb9586a4b3d8baf3b0eb4de06c4.png
[20210526230102682.png]: /images/20221014/b17c47f07d87487ca56cfa88fc0c6a93.png
[20210526232726403.png]: /images/20221014/de37aa705bf24c389324a6322b77c581.png
[20210526232928794.png]: /images/20221014/09ce42aae7ee4c6f9789bf9e401ab77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221014/12bc1c04bf5d4a9399734cfd6bd6217e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221014/2420d71ef92b4286918feee13ce8a7d3.png