--- theme: jzman --- ## 定义 ### 为什么引入伪类，伪元素 >`css` 引入伪类和伪元素概念是为了格式化文档树以外的信息。 > >也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素 > ### 什么是伪类 >伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。虽然它和普通的 `css` 类相似，可以为已有的元素添加样式，但是它只有处于 `dom树`无法描述的状态下才能为元素添加样式，所以将其称为伪类 > >伪类是一个冒号（`:`）后跟伪类的名字构成的，有时候名字后面还会有一个放在括号里的值(`:nth-child`) > ### 什么是伪元素 >伪元素是一种`虚拟的元素`，`CSS`把它当成普通`HTML`元素看待。之所以叫伪元素，就因为它们在`文档树`或`DOM`中并`不实际存在`。换句话说，我们`不会在HTML`中包含伪元素，只会通过`CSS`来创建伪元素 > ### 伪元素是一个冒号还是两个冒号 >简单回答：多数情况下，都行。 > >`CSS3` 规范中的要求使用双冒号 (`::`) 表示伪元素，以此来区分伪元素和伪类，。除了`IE8及以下版本`，所有浏览器`都支持`两个冒号的伪元素表示法。 > >有些伪元素只能使用两个冒号，像`::backdrop` > >`建议使用单冒号表示法`，原因也是向后兼容，`CSS3` 标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法 > ### 什么时候使用（不使用）生成的内容 >通过`CSS`生成内容需要用到`CSS`属性`content`和伪元素`:before`或`:after` > >其中的“内容”（`content`）`可是纯文本`，也可以`是一个容器`，通过`CSS`操作来显示某种图形或者装饰性元素。 > ### 重要的内容不要使用生成的内容，原因如下： 1. 屏幕阅读器读不到它 2. 无法选中 3. 如果为了装饰而在生成内容中使用了多余的内容，那么支持CSS生成内容的屏幕阅读器会大声地把它读出来，导致用户体验更差 ## 伪类 ![css伪类.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b9d78928fe44fd5a1e9fe6150c601c3~tplv-k3u1fbpfcp-watermark.image) ### 状态伪类 >通常出现在用户执行某个操作的情况下; `link`、`visited`、`hover`、`active`、`focus` > >顺序：`lvha` 不能乱 > ```css a:link { color: blue } /* 未访问链接 */ a:visited { color: purple } /* 已访问链接 */ a:hover { font-weight: bold } /* 用户鼠标悬停 */ a:active { color: lime } /* 激活链接 */ ``` #### :FOCUS `:focus`用于选择已经通过指针设备、触摸或键盘`获得焦点的元素`，在表单里使用得非常多 ```css a:focus { color: green; } input:focus { background: #eee; } ``` ### 结构化伪类 >结构化伪类选择通过`其他选择符无法选择`的`文档树`或`DOM`中的其他信息 > #### :first-child 选择父元素的第一个子元素 ```css li:first-child { color: orange; } ``` #### :last-child 选择父元素的最后一个子元素 ```css li:last-child { color: orange; } ``` #### :first-of-type 选择父元素容器内任意类型子元素的第一个元素 >第一个`li`元素和第一个`span`元素的文本才是红色的 > #### :last-of-type 选择父元素容器内任意类型子元素的最后一个元素 >最后一个`li`元素和最后一个`span`元素的文本才是橙色的 > ```html

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. This text will be orange.
Lorem ipsum dolor sit amet.
This text will be orange.

``` ```css ul :first-of-type { color: red; } ul :last-of-type { color: orange; } ``` #### :nth-child 根据元素在标记中的次序选择相应的元素 >首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...） > >`:nth`伪类都接受一个参数，这个参数是一个`公式`。公式可以是一个`整数`，或者关键字`odd`、`even`，或者形如`an+b`的结构。 > - a是一个数值（整数） - n就是n - +是运算符，可以是加号+或减号- - b也是一个整数，但只有使用了运算符的时候才会用到 ```html

Alpha
Beta
Gamma
Delta
Epsilon
Zeta
Eta
Theta
Iota
Kappa

``` >选择第2个子元素，结果Beta会变成橙色: > ```css ol :nth-child(2) { color: orange; } ``` >从第2个子元素起，隔一个选一个，结果Beta、Delta、Zeta、Theta和Kappa会变成橙色 > ```css ol :nth-child(2n) { color: orange; } ``` >选择所有偶数个子元素 > ```css ol :nth-child(even) { color: orange; } ``` >从第6个子元素起，隔一个选一个，结果Zeta、Theta和Kappa会变成橙色： > ```css ol :nth-child(2n+6) { color: orange; } ``` #### `:nth-of-type` 与`:nth-child`类似 >主要区别是它更具体了，只`针对特定类型`的元素 > >所有容器内的第2个p元素将为橙色 > ```html

Heading Goes Here

Lorem ipsum dolor sit amet.

This text will be orange.

``` ```css p:nth-of-type(2) { color: orange; } ``` #### :nth-last-child 从后往前选择元素 > 用法和`:nth-child`完全一样 > #### :NTH-LAST-OF-TYPE >从后往前数，其余跟`:nth-of-type`一样 > #### :only-child选择父元素中唯一的子元素 >第一个`ul`只有一个子元素，因此该子元素将变成橙色。第二个`ul`有多个子元素，因此其子元素不会受`:only-child`伪类影响 > ```html

This text will be orange.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

``` ```css ul :only-child { color: orange; } ``` #### :only-of-type 选择同级中类型唯一的元素 >与`:only-child`类似，但针对`特定类型的元素`，让选择符有了更强的意义。 > 第一个ul只有一个li元素，因此其文本将为橙色: ```html

This text will be orange.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

``` ```css li:only-of-type { color: orange; } ``` #### :target 通过元素的ID及URL中的锚名称选择元素当浏览器中的`URL`以`#target`结尾时，`ID`为`target`的文章将被选中 ``` http://awesomebook.com/#target ``` ```html

`:target` pseudo-class

Lorem ipsum dolor sit amet, consectetur adipisicing elit!

``` ```css :target { background: yellow; } ``` #### :not伪类也叫取反伪类,选择与参数不匹配的元素 >它通过括号接受一个参数，一个“选择符”。实际上，这个参数也可以是另一个伪类。 > >这个伪类可以连缀使用，但不能包含别的`:not`选择符 > ```html

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

``` 除了类为`.first-item`的`li`之外的`li`元素的文本都是橙色的： ```css li:not(.first-item) { color: orange; } ``` ##### “连缀”两个:not伪类应用下面的`CSS`规则，除了类为`.first-item`的li和`最后一个li`，其他li都会有黄色背景和黑色文本： ```css li:not(.first-item):not(:last-of-type) { background: yellow; color: black; } ``` ### 验证伪类 >虽然本节介绍的伪类都用于表单元素，但其中有的伪类也可以用于其他HTML元素。 > #### :checked 选择被勾选或选中的单选按钮、多选按钮及列表选项当复选框被选中时，与其相邻的`` 元素的背景会变成黄色 ```html 我同意 ``` ```css input:checked + label { background: yellow; } ``` #### :default 从表单中一组类似元素里选择默认的元素 >例如：提交按钮总是表单的默认按钮 > ```html ``` ```css :default { background: yellow; } ``` #### :disabled 择禁用状态的表单元素 >`name`输入框处于禁用状态，因此会半透明: > ```html ``` ```css :disabled { opacity: .5; } ``` #### :enabled 选择启用的元素 >所有表单元素默认都是启用的，除非在标记中添加了`disabled`属性 > ```css :enabled { opacity: 1; border: 1px solid green; } ``` #### :empty 选择不包含任何内容的空元素 >只要包含一个字母、其他HTML元素，甚至一个空格，都不算空。 > - 第一个元素中包含文本，因此背景不会变成橙色 - 第二个元素包含一个空格，空格也是内容，因此也不会有橙色背景 - 第三个元素中什么也没有（空的），因此背景为橙色 - 最后一个元素中只有一个HTML注释（也是空的），因此也有橙色背景。 ```html

This box is orange

``` ```css div { background: orange; height: 30px; width: 200px; } div:empty { background: yellow; } ``` #### :in-range 选择有范围且值在指定范围内的元素 >在下面的例子中，输入元素支持输入`5~10`。输入值在这个范围内，会触发绿色边框 > ```html ``` ```css input[type=number] { border: 5px solid orange; } input[type=number]:in-range { border: 5px solid green; } ``` #### :out-of-range 选择有范围且值超出指定范围的元素 >在下面的例子中，输入元素支持输入1~12。输入值超出这个范围内，会触发橙色边框 > ```html ``` ```css input[type=number]:out-of-range { border: 1px solid orange; } ``` #### :indeterminate 选择单选按钮或复选框在页面加载时没有被勾选的 >比如，页面加载后，一组单选按钮中没有默认或预先勾选的，或者一个复选框已经通过`JavaScript`设置为`indeterminate`状态。 > ```html

Option 1
Option 2
Option 3

``` ```css :indeterminate + label { background: orange; } ``` #### :valid 选择`输入格式符合要求`的表单元素 `email`输入框中的电子邮箱格式输入正确，会生效，将出现1像素的绿色边框： ```css input[type=email]:valid { border: 1px solid green; } ``` #### :invalid 选择输入`格式不符合要求`的表单元素 `email`输入框中的电子邮箱格式不正确时，将出现橙色边框： ```css input[type=email]:invalid { background: orange; } ``` #### :optional 选择表单中非必填的输入字段 >只要输入字段中没有`required`属性，就会被`:optional`伪类选中 > 在下面的例子中，这个数值字段是可以选填的，因此其中的文本将为灰色: ```html ``` ```css :optional { color: gray; } ``` #### :read-only伪类选择用户不能编辑的元素 >与`:disabled`伪类相似，标记中使用的属性决定了使用哪个伪类。 > 文本框有一个readonly属性，因此会被:read-only伪类选中，文本将为灰色： ```html ``` ```css input:read-only { color: gray; } ``` #### :read-write伪类选择用户可以编辑的元素 >适用于有`contenteditable`属性的HTML元素。 > >有时候，可以与`:focus`伪类一块使用以增强用户体验 > 点击`div`元素就可以编辑其中的内容，为此可以应用特殊的样式，让用户知道自己可以编辑其中的内容: ```html

Click on this text to edit it

Lorem ipsum dolor sit amet, consectetur adipisicing elit!

``` ```css :read-write:focus { padding: 5px; border: 1px dotted black; } ``` #### :required伪类选择有required属性的表单元素 >除了通过标签中的星号（*）提示必填，也可以通过这个伪类为输入字段应用样式 > 输入框有required属性，通过这个伪类为它应用特殊样式: ```html ``` ``` :required { color: black; font-weight: bold; } ``` #### :scope伪类适用于style标签中有scoped属性的情形 >如果页面中某一部分的`style`标签里没有`scoped`属性，那么`:scope`伪类会一直向上查找，直到`html`元素，即当前样式表的默认作用范围 > 在下面的例子中，第二个`section`中有一个`scoped`样式表，因此这个`section`中的文本会变成斜体: ```html article>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

****

This text will be italicized

This text will be italicized.

Heading Goes Here

`:target` pseudo-class

Click on this text to edit it

Lorem ipsum dolor sit amet

This text will be italicized

Ricardo

Ricardo

Heading Goes Here

:target pseudo-class

Click on this text to edit it

Lorem ipsum dolor sit amet

This text will be italicized

Ricardo

Ricardo

`:target` pseudo-class