:: 用于伪元素，例如::first-of-type或::after ' O G0 }' P$ c5 J% a' f, F/ Y) D- ?! i
下面让我们深入研究一些示例。 A$ \6 L4 ]$ ]) L4 v' ?! p, L 一、“伪”是什么意思？ + k- n% M' ~3 H 伪这个词的英文定义是“假的”或“不真实的”。那么伪类和伪元素表示什么意思呢？伪类和伪元素不手动写入HTML，也不会出现在DOM（或文档树）中，而由CSS创建！) m) D+ }8 m! x" }& R 二、什么是伪类？/ r6 I) }! b. v( a# p
伪类允许你根据页面上编写的HTML之外的信息（例如用户交互或存储在浏览器中的信息）选择CSS中的元素。伪类通过单个冒号(:)后跟伪类名称实现访问。0 r k7 k0 }9 R n7 n
你可以使用伪类根据元素的状态设置元素的样式。我们经常会看到页面上访问过的链接显示为不同的颜色，实现方式是通过在CSS中定位锚标记(<a>元素)的:visited伪类来设置其样式。* ^5 i* y5 l3 r$ f
现在让我们去Google的搜索引擎上观察这一点。前往google.com并搜索曾访问过的内容。打开浏览器开发工具，在CSS检查器中找到a:visited选择器。3 p+ e6 p' ]4 T4 e6 w
5 L' n) q. |$ Z \$ L7 y
在上面这个黑暗模式下的屏幕截图中，可以看到我访问过的站点链接是紫色的，列表中的第二个站点是我没有访问过的，显示为蓝色。 * U! d, }2 n9 @) M- s { 除了受到浏览器信息（例如访问链接）的影响之外，伪类还可能受到页面上用户操作（添加或删除）的影响，例如将鼠标悬停在元素上或聚焦在元素上。下面是:hover伪类在Google搜索结果中的作用。 ( s% {7 g- X- U/ k
$ a2 A f4 G. N7 b. n$ n7 h* {: t
在上面这个谷歌搜索结果的屏幕截图中，我们可以看到鼠标悬停使得链接添加了下划线效果。1 k$ P0 N0 l7 I 三、什么是伪元素？0 m5 L: ~! N% p9 f9 X2 D) B
伪元素选择器允许你使用CSS来设置DOM元素特定部分的样式。伪元素通过双冒号(::)后跟伪元素选择器来实现访问。与伪类不同，伪元素不能根据元素的状态来设置元素的样式。, d1 g$ C8 }4 d* X
请看一个例子。通常，文章内容类的网站会使用“首字下沉”，这是一种印刷惯例，表现为会有一个非常大的单个字母来标记一段文本的开头。你可以通过定位CSS中的::first-letter伪元素来实现这一点。- \% E0 n h7 e F* D d
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2022-11-17 15:57:08
