CSS中的伪类和伪元素

伪类用一个冒号表示：用于根据特定条件选中特定的元素

伪元素用两个冒号表示：是一个元素中的特定的某部分文档，代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

css2之前伪元素和伪类都用一个冒号表示，但是css3之后为了区分两者，伪类采用一个冒号来表示，伪元素采用两个冒号来表示

浏览器为了兼容之前的CSS2代码，伪元素使用一个冒号也可以识别，抛开兼容性的问题，在书写时应该尽可能养成好习惯，区分两者

常见的伪元素：

::before(content:'';style)：在元素之前插入内容

.demo p::before{content:'之前插入内容';color:red;font-weight:bold}
表示demo类的所有p子元素之前都添加红色的加粗文字"之前插入内容"

::after(content:'';style)：在元素之后插入内容

::first-letter：匹配第一个字符

该选择器仅适用于在块级元素中，该选中器可使用的css属性
font、color、background、margin、padding、border、
text-decoration、vertical-align(当float为none时生效)、
text-transform、line-height、float、clear

::first-line：匹配第一行

该选择器仅适用于在块级元素中，该选中器可使用的css属性
font、color、background、word-spacing、
letter-spacing、text-decoration、vertical-align、
text-transform、line-height、clear

::selection：匹配被选中的文本，该选中器可使用的css属性color、background、cursor以及outline

::placeholder ：用于选择并修改表单字段样式的占位符文本

::marker ：用于为列表项中的标记符设置样式，通常包含无序列表的项目符号或有序列表的数字/字母

::file-selector-button：用于选择文件的按钮元素。可以用来样式化文件上传控件中的选择按钮

::cue：用于样式化媒体元素（如音频或视频）中的字幕或注释。可以用来设置字幕的样式，比如字体、颜色等。

::part()：用于自定义 Web 组件的内部部件。可以针对组件的具体部分应用样式，并通过组件的 shadow DOM 提供的 Custom Elements API 进行访问。

::slotted()：用于样式化插槽内容。插槽是一种在 Web 组件中用于插入内容的机制，以应用样式到被插入的内容，以实现更精确的样式控制

常见的伪类：

主要用于表单元素的伪类

:checked：匹配处于选中状态的单选(radio)、复选(checkbox)或select元素

input[type=radio]:checked{}
选择type值为redio的处于选中状态的input

:default：匹配设置为默认选择状态的用户界面元素（如单选按钮或复选框）

:disabled：匹配已经禁用的元素，主要用于表单元素

:enabled：匹配已经启用的元素，主要用于表单元素

:in-range：匹配表单元素值在指定区间的元素，主要配合input元素中的min和max属性使用

:indeterminate：选择状态不确定的表单元素，例如既未选中也未取消选中的复选框（在树状结构中经常见到）

:out-of-range：匹配表单元素值不在指定区间的元素，主要配合input元素中的min和max属性使用

:invalid：匹配表单元素值是非法的元素，用于验证input元素中的min和max属性，及type为email、number等的值是否合法

:valid：匹配表单元素值是合法的元素，用于验证input元素中的min和max属性，及type为email、number等的值是否合法

:optional：匹配没有设置 required 属性的表单元素，用于input, select 和 textarea

:read-only：匹配由于readonly属性而不可编辑的表单元素

:read-write：匹配可读及可写的元素(没有设置"readonly" 属性)，用于input和textarea元素

:required：匹配设置了"required" 属性的元素，用于 input, select 和 textarea

:focus：匹配当前获得焦点的元素

超链接相关伪类

:link：匹配所有未被点击的链接

:visited：匹配所有已被点击的链接

:hover：匹配鼠标悬停其上的E元素

:active：匹配鼠标已经其上按下、还没有释放的E元素

:target：匹配当前活动的锚链接目标元素，当点击了锚链接，该目标处于活动状态

位置选择相关的伪类

:nth-child(n)：匹配正数指定位置，匹配所有同级元素

数字序号:nth-child(number)：直接匹配第number个元素。number必须为大于0的整数
li:nth-child(3){} /*第3个li*/

倍数写法:nth-child(an)：匹配所有倍数为a的元素。字母n是倍数写法的标志，如3n、5n
li:nth-child(3n){}/*第3、第6、第9、…、所有3的倍数的li*/

倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)：a,b均为正整数或0。如3n+1、5n-1
li:nth-child(3n+1){}/*第1、第4、第7、…/
li:nth-child(5n-1){}/*第4、第9、…/
li:nth-child(3n±0){}/*相当于(3n)*/
li:nth-child(±0n+3){}/*相当于(3)*/

用法四：反向倍数分组匹配:nth-child(-an+b)：倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个
li:nth-child(-3n+8){}/*匹配第8、第5和第2个li*/
li:nth-child(-1n+8){}/*或(-n+8)，匹配前8个li*/

用法五种：奇偶匹配:nth-child(odd) 与 :nth-child(even)
匹配序号为奇数或偶数的元素
奇数(odd)与(2n+1)结果一样
偶数(even)与(2n+0)及(2n)结果一样

:nth-last-child(n)：匹配倒数指定位置，使用方法和:nth-child(n)相同

:first-child：匹配同级元素中第一个元素，同:nth-child(1)

:last-child：匹配同级元素中最后一个元素，同:nth-last-child(1)

:nth-of-type(n)：匹配正数指定位置，匹配同类型的同级元素

用法和:nth-child(n)相同
不同的是:nth-of-type(n)只会匹配指定类型

<ul>
<p>p1</p>
<li>li1</li>
<li>li2</li>
<p>p2</p>
</ul>
ul li:nth-child(2)：选择ul下面的第二个子元素，如果不是li标签则选择失败，所以选择了li1标签
ul li:nth-of-type(2)：选择ul下面的第二个li元素，所以选择了li2标签

不指定标签:
ul :nth-child(2)：选择了第二个元素li1元素
ul :nth-of-type(2)：选择了第二p元素和第二和li元素，选择了所有类型标签的第二个

:nth-last-of-type(n)：匹配正数指定位置，用法同:nth-last-child(n)

:first-of-type：匹配同级元素中第一个特定元素，同:nth-of-type(1)

:last-of-type：匹配同级元素中最后一个特定元素，同:nth-last-of-type(1)

其他伪类

:only-of-type：匹配没有其他相同类型的同级元素的元素

:only-child：匹配没有同级元素的元素

:empty：匹配每个没有任何子级的元素(包括文本节点)，即没有任何内容盒子元素的空元素

:not(selector)：匹配不是selector的元素

div:not(#container) {}
选择除#container外的所有div

:has(selector)：匹配包含selector的元素

div:has(p#container) {}
选择包含#container的p标签的所有div

:root：匹配文档的根元素，在html中根元素始终是HTML元素

:lang(language)：匹配带有lang属性且值为language的元素

:fullscreen：选择当前以全屏模式显示的元素

:is(selectors)：指定若干个选择器，匹配满足任一选择器的元素，和使用逗号分割的多重选择器功能相同

:where(selectors)：与 :is() 类似，唯一不同的是:where()的优先级为0，即仅能覆盖默认样式

.head a,.top a,.nav a,.sidebar a,.footer a{...}

:where (.head,.top,.nav,.sidebar,.footer) a{...}