CSS3 伪元素与伪类选择器区别、详解与应用实例

在这里插入图片描述

伪元素与伪类两者都是通过在选择器后附加一个特定的关键字来定义,遵循相似的语法规则,并在 CSS 规则块中设置相应的样式。伪元素 能够通过 content 属性添加或替换内容。例如,:before 和 :after 可以插入文本、图像或其他生成的内容。伪类 仅影响元素的样式,而不添加或修改内容。它们基于用户的交互、文档结构或其他逻辑条件来改变元素的表现。主要区别如下:

  • 作用对象

    • 伪类选择器(Pseudo-classes)作用于实际存在的元素,用于描述元素的某种特定状态或关系,如链接的访问状态(:visited)、鼠标悬停状态(:hover)、是否为文档中的第一个子元素(:first-child)等。它们不直接改变元素的结构,而是影响元素在特定条件下的表现样式。
    • 伪元素选择器(Pseudo-elements)则用于创建并选择元素内的某个特定部分或是在元素前后生成新的、虚拟的内容节点。例如,:before:after 可以用来插入额外内容,:first-line:first-letter 分别选择元素首行文本和首字母,:marker 控制列表项标记样式等。这些伪元素并不对应于HTML文档中的实际元素,但可以对其应用样式,如同它们是真实存在的部分一样。
  • 语法标识

    • 伪类 通常使用一个冒号(:)进行标识,如 :hover:focus
    • 伪元素 在 CSS3 中使用两个连续的冒号(::)进行标识,以区分于旧版 CSS 中的伪类。尽管大多数现代浏览器仍接受单冒号表示伪元素(如 :before),但为了符合 W3C 标准和保持最佳实践,建议使用双冒号形式,如 ::before::after
  • 可复用性

    • 伪类 可以在同一选择器中组合使用,如 a:hover:focus 表示同时处于悬停和聚焦状态的链接。
    • 伪元素 由于代表了元素内部的特定部分或生成的新内容,一般不能在同一选择器中重复出现。一个元素在同一时刻只能有一个:before:after伪元素生效。

一、CSS3 伪元素选择器详解与应用实例

CSS3 伪元素是一种特殊的 CSS 选择器,它们允许开发者在不修改 HTML 结构的前提下,通过 CSS 为元素添加或修改特定部分的样式,或者在元素内部或外部生成并控制虚拟内容。以下是对几种常见 CSS3 伪元素的详解以及应用实例:

1、:before:after

:before:after 伪元素分别在所选元素的内容区域之后创建一个新的、无内容的、不可见的“子元素”。然后,通过给这个伪元素设置样式(如内容、尺寸、颜色、背景等),使其变为可见,并在视觉上表现为紧随原元素内容之后的部分。这些内容由 content 属性定义,并且可以应用其他样式。

语法

selector:before {content: "..." /* 或其他值 */;/* 其他样式声明 */
}selector:after {content: "..." /* 或其他值 */;/* 其他样式声明 */
}

其中,content 属性是定义伪元素生成内容的关键。它可以接受以下几种值:

  • 字符串:直接指定要显示的文字。
  • 引号包围的HTML实体:如 content: "—";(破折号)。
  • URL:插入图片资源,如 content: url(image.png);
  • 生成内容关键字:如 content: counter(name);(计数器)或 content: attr(attribute-name);(获取元素属性值)。

应用实例

1.1. 添加装饰性内容

添加引号、图标或其他装饰性元素。

  • 添加引号:
blockquote:before {content: open-quote;font-size: larger;color: #666;
}blockquote:after {content: close-quote;
}
  • 在列表项前/后添加自定义图标:
li:before {content: url(icon-checkmark.svg);margin-right: 0.5em;
}li.completed:after {content: "\2713"; /* Unicode 字符:对勾 */color: green;font-size: 1.5em;vertical-align: super;
}

1.2. 清除浮动

:after 常用于创建一个空的块级元素,配合 clear:both 来清除浮动对后续元素的影响,避免“高度塌陷”问题。

.clearfix:after {content: "";display: table;clear: both;
}

.clearfix 类应用于需要清除内部浮动的容器元素。

1.3. 替代或扩展HTML内容

利用 attr() 函数,可以从元素的属性中提取值作为 :after 的内容,实现动态文本展示。

abbr[title]:after {content: " (" attr(title) ")";font-size: smaller;color: gray;
}

此例中,当鼠标悬停在带有 title 属性的 abbr 元素上时,会显示一个包含 title 属性值的小字号灰色括注内容。

1.4. 实现复杂形状与动画

结合 contentbackgroundborder 等属性以及CSS3的 transformtransitionanimation,可以使用 :after 创建复杂的形状和动画效果。

.button:after {content: "";display: inline-block;width: 0;height: 0;border-top: ⅓em solid transparent;border-right: ⅓em solid transparent;border-bottom: ⅓em solid #007BFF;border-left: ⅓em solid transparent;margin-left: 0.½em;
}.button:hover:after {transform: translateY(-0.1em);transition: transform 0.2s ease-in-out;
}

上述代码在.button元素后创建了一个三角形下拉箭头,并在鼠标悬停时实现平滑的下移动画。

注意事项

  • :after 伪元素必须与 content 属性一起使用,否则不会产生任何效果。
  • 由于 :after 是创建的虚拟元素,无法通过JavaScript进行DOM操作。
  • 虽然 :after 生成的内容可以参与布局,但它不计入DOM,不影响语义,也不影响键盘导航等辅助功能。

总结而言,CSS3 伪元素选择器通过在元素内容后插入自定义内容,极大地丰富了网页设计的表现力,且无需改动HTML结构。熟练运用伪元素与其他CSS技巧,可以帮助开发者构建更加美观、响应迅速且易于维护的网页界面。

2、:first-line:first-letter

:first-line 伪元素选择器用于设置元素内首行文本的样式,而 :first-letter 伪元素则用于设置元素内首字母的样式。

语法

selector:first-line {/* 样式声明 */
}selector:first-letter {/* 样式声明 */
}

应用实例

  • 首行缩进:
article p:first-line {text-indent: 2em;
}
  • 首字母大写与装饰:
article h2:first-letter {font-size: 2em;float: left;margin-right: 0.5em;line-height: 0.8;color: #8A2BE2;background-color: #F8F8FF;padding: 0.⅔em 0.⅓em;border-radius: 0.5em;
}

二、CSS3 伪类选择器详解与实践示例

CSS3 伪类选择器是一种强大的工具,它允许开发者基于元素状态而非其在文档树中的位置或类、ID等固有属性来精确地定位并施加样式。这些选择器以特殊的语法结构描述元素的不同条件状态,如用户交互、位置关系、内容特性等,从而实现动态、响应式的网页设计。以下是CSS3伪类选择器的详细解释及其实际应用示例。

1、静态伪类选择器

:link:visited
  • :link: 用于选择尚未被用户访问过的超链接(<a>元素)。通常用于设置未访问链接的基本样式。

    a:link {color: blue;text-decoration: none;
    }
    
  • :visited: 选择用户已经访问过的链接。用于设置已访问链接的区分样式。

    a:visited {color: purple;
    }
    

2、用户交互伪类选择器

:hover, :focus, :active
  • :hover: 当鼠标指针悬浮在元素上时,匹配该元素。

    button:hover {background-color: #f0f0f0;cursor: pointer;
    }
    
  • :focus: 选择获得焦点的元素,常见于表单控件或可聚焦元素(如<input>, <textarea>, <button>等)。

    input:focus {outline: 2px solid #007BFF;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
  • :active: 用于表示用户正在激活或按下某个元素(通常在鼠标点击或触摸屏上按压时)。

    a:active {color: red;font-weight: bold;
    }
    

3、结构化伪类选择器

:first-child, :last-child, :only-child, :nth-child(n)
  • :first-child: 选择作为其父元素第一个子元素的元素。

    li:first-child {list-style-type: square;
    }
    
  • :last-child: 选择作为其父元素最后一个子元素的元素。

    div > p:last-child {margin-bottom: 0;
    }
    
  • :only-child: 选择没有兄弟元素的元素。

    .message:only-child {border-width: 2px;
    }
    
  • :nth-child(n): 选择其父元素的第n个子元素,其中n可以是数字、关键词(even, odd)或公式(如2n+1)。

    li:nth-child(2n) {background-color: #f9f9f9;
    }
    

4、内容相关伪类选择器

:empty, :target, :enabled, :disabled, :checked
  • :empty: 选择没有任何内容(包括子元素、文本节点等)的元素。

    div.empty:empty {display: none;
    }
    
  • :target: 选择当前URL片段标识符(hash)与该元素ID相匹配的元素。

    #content:target {background-color: lightyellow;
    }
    
  • :enabled:disabled: 分别选择启用状态与禁用状态的表单元素。

    input:enabled {background-color: white;
    }
    input:disabled {opacity: 0.6;cursor: not-allowed;
    }
    
  • :checked: 用于复选框(<input type="checkbox">)、单选按钮(<input type="radio">)或<option>元素处于选中状态时。

    input[type="checkbox"]:checked + label {text-decoration: line-through;
    }
    

5、否定伪类选择器

:not(selector)
  • :not(): 选择不符合括号内指定选择器的元素。

    /* 除了class为"exclude"的所有段落 */
    p:not(.exclude) {color: green;
    }
    

6、其他伪类选择器

:root, :nth-of-type(n), :nth-last-of-type(n), :first-of-type, :last-of-type, :only-of-type
  • :root: 选择文档的根元素(HTML文档中通常是<html>元素)。

    :root {--primary-color: #3498db;
    }
    
  • :nth-of-type(n):nth-last-of-type(n): 类似于:nth-child(n),但仅针对同级元素中特定类型的子元素。

    article:nth-of-type(even) {background-color: #f5f5f5;
    }
    
  • :first-of-type, :last-of-type:only-of-type: 分别选择同级元素中第一个、最后一个或唯一一个特定类型的子元素。

    div > p:first-of-type {font-weight: bold;
    }
    

通过熟练掌握以上CSS3伪类选择器及其应用场景,开发者能够编写出更高效、更具表现力和交互性的CSS代码,提升网站的用户体验和视觉效果。随着CSS标准的不断演进,还可能有更多新的伪类选择器加入到CSS3的行列中,为前端开发提供更为丰富和精细的控制手段。

无论是伪类还是伪元素,都是为了增强 CSS 选择器的功能,使开发者能够在不改动 HTML 结构的情况下,更精细地控制元素的样式和布局。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/312950.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像分类:Pytorch实现Vision Transformer(ViT)进行图像分类

图像分类&#xff1a;Pytorch实现Vision Transformer&#xff08;ViT&#xff09;进行图像分类 前言相关介绍ViT模型的基本原理&#xff1a;ViT的特点与优势&#xff1a;ViT的缺点&#xff1a;应用与拓展&#xff1a; 项目结构具体步骤准备数据集读取数据集设置并解析相关参数定…

经典目标检测YOLOV1模型的训练及验证

1、前期准备 准备好目录结构、数据集和关于YOLOv1的基础认知 1.1 创建目录结构 自己创建项目目录结构&#xff0c;结构目录如下&#xff1a; network CNN Backbone 存放位置 weights 权重存放的位置 test_images 测试用的图…

电视盒子哪个好?2024口碑网络电视盒子排行榜

多年来电视盒子始终占据重要地位&#xff0c;功能上并没有受到影响。在这么多品牌中哪些电视盒子的评价是最好的呢&#xff1f;小编根据各大电商平台的用户评价情况整理了口碑最好的网络电视盒子排行榜&#xff0c;跟着小编一起看看市面上的电视盒子哪个好吧。 TOP 1&#xff1…

【每日刷题】Day17

【每日刷题】Day17 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; 2. 162. 寻找峰值 - 力扣…

Solana主网使用自定义的RPC进行转账

1、引言 如果用 browser 连接主网的 RPC server 会收到 error code 403 message 為 Access forbidden, contact your app developer or supportrpcpool.com. 错误&#xff0c;因为主网的 RPC server 会检查 HTTP Header 如果判断出來是 browser 就会报告 403 錯誤。 要解決这…

TRIZ理论下攀爬机器人的创新设计与研究

随着科技的飞速发展&#xff0c;机器人技术已广泛应用于各个领域。特别是在复杂环境下的作业&#xff0c;如灾难救援、太空探测等&#xff0c;对机器人的移动能力和适应性提出了更高要求。在这样的背景下&#xff0c;基于TRIZ理论的攀爬机器人设计与研究应运而生&#xff0c;它…

Dual-AMN论文阅读

Boosting the Speed of Entity Alignment 10: Dual Attention Matching Network with Normalized Hard Sample Mining 将实体对齐速度提高 10 倍&#xff1a;具有归一化硬样本挖掘的双重注意力匹配网络 ABSTRACT 寻找多源知识图谱(KG)中的等效实体是知识图谱集成的关键步骤&…

CentOS-Stream-9升级openssh9.7p

CentOS Stream 9 ssh -V需要的RPM包 openssh-9.7p1-1.el9.x86_64.rpm openssh-clients-9.7p1-1.el9.x86_64.rpm openssh-server-9.7p1-1.el9.x86_64.rpm 编译openssh openssh官方只提供源码包&#xff0c;我们选择自己将源码编译为rpm包来升级环境的openssh&#xff0c;需要…

HTML5+CSS3小实例:菜单按钮的三种切换动画

实例:菜单按钮的三种切换动画 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initia…

Word分节后,页码不连续、转PDF每节后多出空白页解决办法

1. 问题图例 废话少说&#xff0c;先上图&#xff1a; 2. 问题分析 问题分析&#xff1a;出现以上问题的原因可能有&#xff0c; 未链接到上一节页面布局中节的起始位置设置为[奇数页] 3. 解决问题 若为【1. 未链接到上一节】导致该问题出现&#xff0c;则我们需要选中页脚…

关于外网java后端服务访问内网minio中间件,因连接minio超时,启动失败问题

注&#xff1a;服务器情况&#xff1a;2台服务器&#xff0c;内网服务器包含&#xff08;activemq、minio、nginx、redis、mysql、后端java服务&#xff09;。外网服务器只有后端java服务&#xff0c;访问内网的中间件&#xff08;内网服务器开放了部分指定端口&#xff09; 问…

前端文件word Excel pdf PPT预览

组件一 <template><j-modal:visible"visible":fullscreen"fileType!other&&fileType!word"ok"handleOk":width"1200"cancel"handleCancel"><vue-office-docxv-if"fileTypeword":src"…

Adobe将Sora、Runway、Pika,集成在PR中

4月15日晚&#xff0c;全球多媒体巨头Adobe在官网宣布&#xff0c;将OpenAI的Sora、Pika 、Runway等著名第三方文生视频模型&#xff0c;集成在视频剪辑软件Premiere Pro中&#xff08;简称“PR”&#xff09;。 同时&#xff0c;Adob也会将自身研发的Firefly系列模型包括视频…

【已开源】​基于stm32f103的爬墙小车

​基于stm32f103的遥控器无线控制爬墙小车&#xff0c;实现功能为可平衡在竖直墙面上&#xff0c;并进行移动和转向&#xff0c;具有超声波防撞功能。 直接上&#xff1a; 演示视频如&#xff1a;哔哩哔哩】 https://b23.tv/BzVTymO 项目说明&#xff1a; 在这个项目中&…

MySQL常用命令和函数的讲解以及表之间的联结

Mysql的中一些语句的用法&#xff1a; 有表&#xff1a; CREATE TABLE book (id int(20) NOT NULL,book_name varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 书名,press varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NUL…

【过程11】——教育被点燃的路上

这里写目录标题 一、背景二、过程1.两年四十万的认知改变2.三年打工仔的经历改变3.一年计算机的人生蜕变4.后面的展望 三、总结 一、背景 人生在世&#xff0c;对于一些事情的笃信笃行&#xff1b;背后真的会有莫大无以言表的波涛。 这个事情到现在已经五年半左右时间了&#…

高标准化及可扩展的产品能力,助力声通科技运营效率不断提升

高标准化及可扩展的产品能力对企业发展具有重要意义&#xff0c;有助于企业提高运营效率、增强市场竞争力&#xff0c;并推动企业实现规模化发展。上海声通信息科技股份有限公司&#xff08;下文称&#xff1a;声通科技或公司&#xff09;作为我国领先的企业级全栈交互式人工智…

PyTorch深度学习之旅:从入门到精通的十个关键步骤

在人工智能的浪潮中&#xff0c;深度学习框架扮演着至关重要的角色。PyTorch作为其中的佼佼者&#xff0c;以其简洁、直观和灵活的特性&#xff0c;吸引了众多开发者与研究者。本文将引导您逐步掌握PyTorch&#xff0c;从基础概念到高级应用&#xff0c;让您在深度学习的道路上…

Pr2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 Premiere简称“Pr”&#xff0c;是一款超强大的视频编辑软件&#xff0c;它可以提升您的创作能力和创作自由度&#xff0c;它是易学、高效、精确的视频剪辑软件&#xff0c;提供了采集、剪辑、调色、美化音频、字幕添加、输出、D…

Redis中的订阅发布(一)

订阅发布 概述 Redis的发布与订阅功能由PUBLISH、SUBSCRIBE、PSUBSCRIBE等命令组成。通过执行SUBSCRIBER命令&#xff0c;客户端可以订阅一个或多个频道&#xff0c;从而成为这些频道的订阅者(subscribe)&#xff1a; 每当有其他客户端向被订阅的频道发送消息(message)时&…