谈谈css里面伪类和伪元素

目录（按 vscode 中的提示来）

伪元素

一、 ::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;
>}

栗子

三十九、 :no-button

暂无

四十、 :not

常用方法

四十一、 :nth-child

常用方法

四十一、 :nth-last-child

相比 :nth-child 而言，两者顺序相反

四十二、 :nth-of-type

类似 :first-of-type 和 :last-of-type

四十三、 :nth-last-of-type

相比 :nth-of-type 而言，两者顺序相反

四十四、 :only-child

属于某个父元素的唯一一个子元素

四十五、 :only-of-type

代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

四十六、 :optional

表示任意没有required属性的 <input>，<select> 或  <textarea> 元素使用它。
和 :required 相反

四十七、 :out-of-range

表示一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围外
和 :in-range 相反

四十八、 :past

暂无

四十九、 :placeholder-shown

这个伪类好像只能设置 input 框外的样式，内部样式(例如 color 等)只能用 ::placeholder 来改变。

五十、 :read-only

表示元素不可被用户编辑的状态（如锁定的文本输入框）
注意：这个选择器不只是选择具有 readonly 属性的<input> 元素，它也会选择所有的不能被用户编辑的元素。
栗子
与 :read-write 相反

五十一、 :read-write

代表一个元素（例如可输入文本的 input元素）可以被用户编辑
注意：这个选择器不仅仅选择 <input> 元素，它也会选择所有可以被用户编辑的元素，例如设置了 contenteditable 属性的  <p> 元素。
与 :read-only 相反

五十二、 :required

表示 任意 <input> 元素表示任意拥有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单在提交之前容易的展示必填字段并且渲染其外观

五十三、 :right

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

五十四、 :root

常用方法，一般用于 css 变量

五十五、 :scope

实验属性，自行体会

五十六、 :single-button

暂无

五十七、 :start

暂无

五十八、 :target

代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配

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

若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中：
<section id="section2">Example</section>

五十九、 :valid

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

六十、 :vertical

暂无

六十一、 :visited

常见方法

六十二、 :where

草案阶段

六十三、 :window-inactive

暂无