2.5-伪类和伪元素

Create by fall on 22 Jul 2019 Recently revised in 27 Nov 2024

伪类选择器

伪类选择器（pseudo-classes）：表示不能被选择器选择的文档之外的元素，或者不能用其他选择简单表达的，比如 :hover。

个人理解就是元素 + 元素对应的状态

以下是常见的伪类选择器

:link a
:visited a 标签访问后的样式
:hover 鼠标移动到上面的样式
:checked、:disabled、:focus，都是针对表单元素

链接相关

匹配每个具有 href 属性的未访问的 <a> 或 area 元素

:link：标签访问前的样式
:visited：标签访问后的样式
``:any-link`：包括访问前和访问后

:active

鼠标按下时的样式，常用于可以被激活的元素，例如：<a>、<button>

这个样式可能被其它链接相关元素覆盖，因此和链接相关元素使用时，有一套使用顺序

:link — :visited — :hover — :active。

ul li:nth-child(1){} /* 此处表示第 1 个节点，如果是 2 表示第二项 */
ul li:nth-child(2n){} /* 放置为 2n 表示偶数个，比如 2，4，6 */
p:nth-of-type(even){} /* 所有偶数行的选择器 */
ul li:nth-child(2n+1){} /* 表示数个，比如2，4，6 */
p:nth-of-type(odd){} /* 所有奇数行的选择器 */
ul :nth-child(2n){} /* 表示不管标签是什么，只控制偶数个 */
p:first-of-type{} /* 第一个类型 */ 
last-of-type{}
.ele:only-of-type{} /* 第一个类型 */ 

:root {
	/* 根元素伪类，类似于使用 body 标签 */
}

:checked

表示任何处于选中状态的 radio（<input type="radio">），checkbox（<input type="checkbox">）或者是 <select> 中的 <option>。

因为浏览器经常将 <option> 视为可替换元素，因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。

:focus-visible

可以根据用户的输入方式（鼠标 & 键盘），展示不同形式的焦点

比如 button 元素，在鼠标操作时，不展示 :focus 样式，在键盘操作时，展示 :focus 样式

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

伪元素

文档中不存在该元素（一些特殊位置，可以通过文档添加一些标签包裹内容获取到，但通过伪元素更加方便）

伪元素本质上是选取一部分 box 中的内容，该部分并没有特殊效果，但通过伪元素进行更改后，可以使其拥有独立样式

.box::first-letter{} // 第一个字母
.box::first-line{} // 第一行内容
.box::before{
  content: radial-gradient(circle at 35% 35%, white 10%, pink 70%); // 必须设置 content，且 content 可以设置为渐变
}  // 文档之前的元素
.box::after{}   // 文档之后的元素

伪类和伪元素都是用来表示文档树中没有明确指出的内容。
伪类和伪元素分别用单冒号 : 和双冒号 :: 来表示。
伪类和伪元素的区别，就是伪元素无需向文本中添加标签就可以实现控制一部分文档。
伪类相当于在特定情况下添加的一个额外的类，伪元素只是对一部分内容进行额外样式定义。

标签和相关属性

::marker

::marker 伪元素设置在了任何拥有 display:list-item 的元素或伪元素上，例如 <li> 或 <summary>

li::marker {
  content: '';
  font-size: 1.2em;
}

参考文章

作者	文章名称
MDN 官方文档	SVG：可缩放矢量图形

伪类选择器​

链接相关​

:active

:checked​

:focus-visible​

伪元素​

标签和相关属性​

::marker​

参考文章​