伪元素
- ::after">一、 ::after
- ::backdrop">二、 ::backdrop
- ::before">三、 ::before
- 四、 ::content
- ::cue">五、 ::cue
- 六、 ::cue()
- 七、 ::cue-region
- 八、 ::cue-region()
- ::first-letter">九、 ::first-letter
- ::first-line">十、 ::first-line
- ::grammer-error">十一、 ::grammer-error
- ::placeholder">十二、 ::placeholder
- ::selection">十三、 ::selection
- 十四、 ::shadow
- ::slotted">十五、 ::slotted
- ::speclling-error">十六、 ::speclling-error
伪类
- :action">一、 :action
- :any-link">二、 :any-link
- :blank">三、 :blank
- :checked">四、 :checked
- 五、 :corner-persent
- 六、 :decrement
- :default">七、 :default
- :defined">八、 :defined
- :dir">九、 :dir
- :disabled">十、 :disabled
- 十一、 :double-button
- :empty">十二、 :empty
- 十三、 :enabled
- 十四、 :end
- 十五、 :first
- :first-child">十六、 :first-child
- :first-of-type">十七、 :first-of-type
- :focus">十八、 :focus
- :focus-visible">十八、 :focus-visible
- :focus-within">十九、 :focus-within
- :fullscreen">二十、 :fullscreen
- 二十一、 :future
- :has">二十二、 :has
- 二十三、 :horizontal
- 二十四、 :host
- :host())">二十五、 :host())
- :host-context())">二十六、 :host-context())
- 二十七、 :hover
- :in-range">二十八、 :in-range
- 二十九、 :increment
- :indeterminate">三十、 :indeterminate
- :invalid">三十一、 :invalid
- :is">三十二、 :is
- :lang()">三十三、 :lang()
- :last-child">三十四、 :last-child
- :last-of-type">三十五、 :last-of-type
- :left">三十六、 :left
- :link">三十七、 :link
- :matches()">三十八、 :matches()
- :valid">五十九、 :valid
- 六十、 :vertical
- :visited">六十一、 :visited
- :where">六十二、 :where
- 六十三、 :window-inactive

目录（按 vscode 中的提示来）
谈谈css里面伪类和伪元素 - 图1

谈谈css里面伪类和伪元素 - 图2

谈谈css里面伪类和伪元素 - 图3

谈谈css里面伪类和伪元素 - 图4

谈谈css里面伪类和伪元素 - 图5

谈谈css里面伪类和伪元素 - 图6

谈谈css里面伪类和伪元素 - 图7

伪元素

一、 ::after

常用方法

二、 ::backdrop

设置某些全屏元素的背景
例如视频的全屏后的背景（默认为黑色）我们可以改成这样
或者配合 fullscreen API，看这里
其对于背景的控制优先级小于 :fullscreen

三、 ::before

常用方法

四、 ::content

暂无

五、 ::cue

配合视频中的字幕用

六、 ::cue()

暂无

七、 ::cue-region

暂无

八、 ::cue-region()

暂无

九、 ::first-letter

::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）
体验连接
使用此特性改变第一个字的颜色优先级最高(高于 !improtant )
如果遇到符号会有些意外情况
 实际使用栗子

十、 ::first-line

基本同上，只不过改变的是第一行颜色

十一、 ::grammer-error

应用于浏览器标识为语法错误的文本段，暂无浏览器支持

十二、 ::placeholder

改变 placeholder 文本样式

十三、 ::selection

改变浏览器对选中的文本样式

十四、 ::shadow

暂无

十五、 ::slotted

用于选定那些被放在 HTML模板中的元素

十六、 ::speclling-error

表示浏览器标记为不正确拼写的文本段，暂无浏览器支持

伪类

一、 :action

常用方法

二、 :any-link

:link 的升级版，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素

三、 :blank

匹配如下节点 1. 没有子节点; 2. 仅有空的文本节点; 3. 仅有空白符的文本节点;
暂无浏览器支持

四、 :checked

常用方法

五、 :corner-persent

暂无

六、 :decrement

暂无

七、 :default

该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用
用于默认选中的样式

八、 :defined

测试结果和官方定义有出入

九、 :dir

匹配特定文字书写方向的元素，暂无浏览器支持

十、 :disabled

常用方法

十一、 :double-button

暂无

十二、 :empty

常用方法

十三、 :enabled

常用方法

十四、 :end

暂无

十五、 :first

@page:first描述的是：打印文档的时候，第一页的样式。
栗子

十六、 :first-child

常用方法、避免和 :first 搞混

十七、 :first-of-type

和 :first-child 相比表示匹配第一次出现的元素

十八、 :focus

常用方法

十八、 :focus-visible

使其仅在键盘(tab)操作时才显示焦点样式 暂无浏览器支持

十九、 :focus-within

捕捉元素的后代元素获得焦点事件栗子

二十、 :fullscreen

fullscreen应用于当前处于全屏显示模式的元素。它不仅仅选择顶级元素，还包括所有已显示的栈内元素
其对于背景的控制优先级大于 ::backdrop

二十一、 :future

暂无

二十二、 :has

暂无浏览器支持

二十三、 :horizontal

暂无

二十四、 :host

暂无

二十五、 :host())

配合 shodow DOM 使用

二十六、 :host-context())

配合 shodow DOM 使用

二十七、 :hover

常用方法

二十八、 :in-range

代表一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内
栗子

二十九、 :increment

暂无

三十、 :indeterminate

表示状态不确定的表单元素
栗子

三十一、 :invalid

表示任意内容未通过验证的 <input> 或其他 <form> 元素
栗子

三十二、 :is

:matches

三十三、 :lang()

基于元素语言来匹配页面元素
栗子

三十四、 :last-child

常用方法

三十五、 :last-of-type

同理 :first-of-type 栗子

三十六、 :left

同理 :first
@page 配套使用, 对打印文档的左侧页设置CSS样式

三十七、 :link

常用方法

三十八、 :matches()

代表集合例如：

``` / 选择header, main, footer里的任意一个悬浮状态的段落(p标签) / :matches(header, main, footer) p:hover { color: red; cursor: pointer; }

/ 以上内容相当于以下内容 / header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }


> [栗子](https://codepen.io/melonxx/pen/zXzNEQ?&editable=true)
<a name="d0d2899f"></a>
## 三十九、 :no-button
> 暂无
<a name="7bb04a26"></a>
## 四十、 [:not](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
> 常用方法
<a name="3e1013db"></a>
## 四十一、 [:nth-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child)
> 常用方法
<a name="78f444f3"></a>
## 四十一、 [:nth-last-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child)
> 相比 `:nth-child` 而言，两者顺序相反
<a name="00fb27d2"></a>
## 四十二、 [:nth-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type)
> 类似 `:first-of-type` 和 `:last-of-type`
<a name="90274d1c"></a>
## 四十三、 [:nth-last-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type)
> 相比 `:nth-of-type` 而言，两者顺序相反
<a name="83658bd6"></a>
## 四十四、 [:only-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child)
> 属于某个父元素的唯一一个子元素
<a name="a6220c7b"></a>
## 四十五、 [:only-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type)
> 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
<a name="eea6f535"></a>
## 四十六、 [:optional](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional)
> 表示任意没有[`required`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-required)属性的 [`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input)，[`<select>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select) 或  [`<textarea>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea) 元素使用它。<br />
和 `:required` 相反
<a name="3fc608b7"></a>
## 四十七、 [:out-of-range](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range)
> 表示一个 [`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 元素，其当前值处于属性 [`min`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-min) 和 [`max`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-max) 限定的范围外<br />
和 `:in-range` 相反
<a name="f63561a5"></a>
## 四十八、 :past
> 暂无
<a name="8bfb29ea"></a>
## 四十九、 [:placeholder-shown](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:placeholder-shown)
> 这个伪类好像只能设置 `input` 框外的样式，内部样式(例如 `color` 等)只能用 `::placeholder` 来改变。
<a name="05db43a3"></a>
## 五十、 [:read-only](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-only)
> 表示元素不可被用户编辑的状态（如锁定的文本输入框）<br />
**注意：这个选择器不只是选择具有 [`readonly`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-readonly) 属性的[`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 元素，它也会选择所有的不能被用户编辑的元素。**<br />
[栗子](https://codepen.io/melonxx/pen/JVMdOb?&editable=true)<br />
与 `:read-write` 相反
<a name="cf33e351"></a>
## 五十一、 [:read-write](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write)
> 代表一个元素（例如可输入文本的 input元素）可以被用户编辑<br />
**注意：这个选择器不仅仅选择 [`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 元素，它也会选择所有可以被用户编辑的元素，例如设置了 [`contenteditable`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-contenteditable) 属性的  [`<p>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) 元素。**<br />
与 `:read-only` 相反
<a name="d49b1b48"></a>
## 五十二、 [:required](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:required)
> 表示 任意 [`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 元素表示任意拥有[`required`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-required)属性的 [`<input>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 或 [`<textarea>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea) 元素使用它. 它允许表单在提交之前容易的展示必填字段并且渲染其外观
<a name="9d618a8c"></a>
## 五十三、 [:right](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:right)
同理 `:first`<br />
[`@page`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@page) 配套使用, 对打印文档的左侧页设置CSS样式
<a name="1db6a848"></a>
## 五十四、 [:root](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root)
> 常用方法，一般用于 `css` 变量
<a name="81e075a1"></a>
## 五十五、 [:scope](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:scope)
> 实验属性，[自行体会](https://codepen.io/melonxx/pen/rbpOYz?&editable=true)
<a name="37e7773c"></a>
## 五十六、 :single-button
> 暂无
<a name="41ef4832"></a>
## 五十七、 :start
> 暂无
<a name="45e52d9e"></a>
## 五十八、 [:target](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target)
> 代表一个唯一的页面元素(目标元素)，其[`id`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-id) 与当前URL片段匹配
>

例如, 以下URL拥有一个片段 (以#标识的) ，该片段指向一个ID为section2的页面元素: http://www.example.com/index.html#section2

若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中：

Example

```

五十九、 :valid

CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
与 invalid 相反

六十、 :vertical

暂无

六十一、 :visited

常见方法

六十二、 :where

草案阶段

六十三、 :window-inactive

暂无