CSS伪类和伪元素是用于在某些特定状态下为元素添加样式的方式 - 核以解忧 - 沸点 - 掘金

前端 @鱼和熊掌一把抓

#每天一个知识点# CSS伪类和伪元素是用于在某些特定状态下为元素添加样式的方式。以下是一些常见的CSS伪类和伪元素：

1.伪类（Pseudo-classes）：

:hover伪类：当鼠标悬停在一个元素上时，会触发:hover伪类，从而可以改变元素的样式。
:active伪类：当鼠标点击一个元素时，会触发:active伪类，从而可以改变元素的样式。
:focus伪类：当元素获得焦点时，会触发:focus伪类，从而可以改变元素的样式。
:visited伪类：当用户访问一个链接时，会触发:visited伪类，从而可以改变元素的样式。

2.伪元素（Pseudo-elements）：

::before伪元素：在元素的内容前面添加内容。
::after伪元素：在元素的内容后面添加内容。
::first-letter伪元素：选择元素内容的第一封信。
::first-line伪元素：选择元素内容的第一行。
使用伪类和伪元素可以给元素添加特殊的效果和样式，例如在按钮上添加阴影、在链接上添加样式、在文本框中添加默认文本等。

使用伪元素的例子：

p::before {
content: "提示："; /* 在p元素内容前面添加“提示：”文本 */
color: red; /* 设置文本颜色为红色 */
margin-right: 10px; /* 在添加的文本和p元素内容之间添加10像素的右边距 */
}
以上代码将在每个段落前面添加一个红色的“提示：”文本，并添加10像素的右边距。

展开

前端开发圈

赞过