介绍一下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段落的第一行添加下划线。
相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪6 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪6 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试