介绍一下CSS中伪类和伪元素的概念

一、伪类(Pseudo - Classes)

1. 定义

伪类是添加到选择器的关键字,用于定义元素的特殊状态。这些状态不是由文档树中的结构或属性来表示,而是基于用户行为(如鼠标悬停)、元素状态(如被选中)或文档结构的特定位置(如第一个子元素)等来确定。

2. 常见伪类

(1)链接伪类
  • :link :用于选择未被访问的链接。例如,a:link {color: blue;}会将未访问的链接文字颜色设置为蓝色。
  • :visited :用于选择已经被访问过的链接。由于隐私原因,可用于设置已访问链接的样式属性相对有限,主要是颜色相关属性。例如,a:visited {color: purple;}会将已访问的链接文字颜色设置为紫色。
(2)用户行为伪类
  • :hover :当鼠标指针悬停在元素上方时应用样式。这是创建交互效果的常用伪类。例如,button:hover {background - color: lightgray;},当鼠标悬停在按钮上时,按钮的背景颜色会变为浅灰色。
  • :active :在元素被激活(如按下鼠标按键但尚未松开)时应用样式。例如,a:active {color: red;},当用户点击链接但尚未松开鼠标时,链接文字颜色变为红色。
(3)结构伪类
  • :first - child :选择作为其父元素的第一个子元素的元素。例如,li:first - child {font - weight: bold;}会将列表中的第一个li元素字体加粗。
  • :last - child :选择作为其父元素的最后一个子元素的元素。例如,p:last - child {text - align: right;}会将父元素中最后一个p元素右对齐。
  • :nth - child(n) :选择作为其父元素的第 n 个子元素的元素。其中 n 可以是一个数字(如3表示第三个子元素)、关键字(如even表示偶数位置的子元素,odd表示奇数位置的子元素)或表达式(如2n + 1表示从第一个子元素开始,每隔一个元素选择一个,即选择位置为 1、3、5 等的子元素)。例如,tr:nth - child(even) {background - color: #f2f2f2;}会将表格中偶数行的背景颜色设置为浅灰色。

二、伪元素(Pseudo - Elements)

1. 定义

伪元素用于创建文档树中不存在的虚拟元素,并为其添加样式。它们允许你对元素的特定部分进行样式设置,就好像这些部分是独立的元素一样。

2. 常见伪元素

(1)::before 和::after
  • ::before :在被选元素的内容前面插入内容。例如,p::before {content: "前置内容";}会在每个p段落元素的内容前面添加 "前置内容" 字样。
  • ::after :在被选元素的内容后面插入内容。例如,p::after {content: "后置内容";}会在每个p段落元素的内容后面添加 "后置内容" 字样。这些插入的内容可以是文本、图像等,并且可以通过其他 CSS 属性进行样式设置,如colorfont - size等。
(2)::first - letter 和::first - line
  • ::first - letter :用于对元素的第一个字母进行特殊样式设置。常用于对段落的首字母进行放大、改变颜色等操作。例如,p::first - letter {font - size: 200%; color: red;}会将每个p段落的第一个字母字体大小放大为原来的 2 倍,并设置为红色。
  • ::first - line :用于对元素内容的第一行进行特殊样式设置。例如,p::first - line {text - decoration: underline;}会在每个p段落的第一行添加下划线。
相关推荐
小墨宝10 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED26 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿30 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子30 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6643 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet