目录（按 vscode 中的提示来）
伪元素
一、 ::after
常用方法
二、 ::backdrop
设置某些全屏元素的背景
例如视频的全屏后的背景（默认为黑色）我们可以改成这样
或者配合fullscreenAPI，看这里
其对于背景的控制优先级小于: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
三、 :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
十六、 :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
二十九、 :increment
暂无
三十、 :indeterminate
表示状态不确定的表单元素
栗子
三十一、 :invalid
三十二、 :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
四十八、 :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
暂无
