web前端-------伪类和伪元素

简介: web前端-------伪类和伪元素

但是,网页中一些特殊的样式,需要用到特殊的CSS选择器来设置。在CSS中,我们把这类选择器称为伪选择器。

伪选择器,分为伪类选择器和伪元素选择器两个大类。

伪类选择器,简称伪类;伪元素选择器,简称伪元素。

在网页中,有些元素的状态是动态变化的,该元素会根据其状态呈现不同的样式。比如,未访问的链接为:带有下划线的蓝色文本,访问过的链接为:带有下划线的紫色文本。

1.要达到这种效果,就需要使用状态伪类。

在网页中,链接通常会有四种不同的状态,分别是未访问状态、已访问状态、鼠标悬停状态、链接点击状态。

这时候,就需要:link、:visited、:hover:active四种状态伪类,依次为链接的四种状态,来设置不同的样式。

(1):link伪类,可以设置「未访问状态」的样式。:浏览器中,未访问的链接默认为蓝色。

(2)visited伪类,可以设置「已访问状态」的样式。

(3):hover伪类,可以设置「鼠标悬停状态」的样式。

               将鼠标经过或悬停在链接上,观察颜色变化。        

(4)active伪类,可以设置「点击时状态」的样式。单击链接不松开,观察颜色变化。

(5)focus伪类:它表示在元素获得焦点时,向元素添加特殊的样式。

在网页中,有时我们需要对特定位置的元素设置一些样式。比如,有若干个p元素,都没有class属性,那么我们如何给某个或某些p元素设置样式呢?

2.这时候,我们就可以使用结构伪类来进行设置。

(1):first-child伪类:first-child伪类,用于匹配第一个子元素。

(2):last-child伪类:last-child伪类,用于匹配最后一个子元素。

(3):nth-child(n)伪类,就十分灵活了,它可以用于匹配第n个子元素。

也就是说,:nth-child(n)伪类可以匹配任意一个子元素,十分方便。

不仅如此,它还能一次性匹配多个子元素。

因为,它的小括号()中的n,不一定是具体的数字,也可以是一个an+b形式的参数。

使用p:nth-child(2n),匹配父元素body的偶数位置的子元素p,

使用p:nth-child(2n+1),匹配父元素body的奇数位置的子元素p,

3.伪元素和伪类的本质区别就在于,它创造了新的元素,而非添加一些样式。

相关文章
|
2天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
5天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
21 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
5天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
29 0
|
5天前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
27 0
|
5天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
33 0
|
6天前
|
编解码 前端开发 JavaScript
Web前端开发需要掌握哪些知识?
Web前端在最近几年发展的十分迅速,报名进行Web前端培训的同学也越来越多。移动互联网的背景之下,每一个人每天会跟各式各样的手机端应用打交道,殊不知这些App都跟Web前端有着密不可分的关系。
|
移动开发 前端开发 JavaScript
Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
  《Web 前端开发精华文章推荐》2014年第一期(总第二十二期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
7633 0
|
8天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
46 3
|
14天前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
28 2
|
16天前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
35 3