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.伪元素和伪类的本质区别就在于,它创造了新的元素,而非添加一些样式。

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

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

相关文章

【贪吃蛇:C语言实现】

文章目录 前言1.了解Win32API相关知识1.1什么是Win32API1.2设置控制台的大小、名称1.3控制台上的光标1.4 GetStdHandle(获得控制台信息)1.5 SetConsoleCursorPosition(设置光标位置)1.6 GetConsoleCursorInfo(获得光标…

【DeepLearning-8】MobileViT模块配置

完整代码: import torch import torch.nn as nn from einops import rearrange def conv_1x1_bn(inp, oup):return nn.Sequential(nn.Conv2d(inp, oup, 1, 1, 0, biasFalse),nn.BatchNorm2d(oup),nn.SiLU()) def conv_nxn_bn(inp, oup, kernal_size3, stride1):re…

接口测试入门,如何划分接口文档

1.首先最主要的就是要分析接口测试文档,每一个公司的测试文档都是不一样的。具体的就要根据自己公司的接口而定,里面缺少的内容自己需要与开发进行确认。 我认为一针对于测试而言的主要的接口测试文档应该包含的内容分为以下几个方面。 a.具体的一个业…

一文深度解读多模态大模型视频检索技术的实现与使用

当视频检索叠上大模型Buff。 万乐乐|技术作者 视频检索,俗称“找片儿”,即通过输入一段文本,找出最符合该文本描述的视频。 随着视频社会化趋势以及各类视频平台的快速兴起与发展,「视频检索」越来越成为用户和视频平…

JVM/GC复习

JVM/GC JVM(java虚拟机)MATjstack(将正在运行的JVM的线程进行快照并且打印出来)死锁VisualVM工具(监控线程内存使用情况)JMX分析堆日志什么情况下可能需要JVM调优补充JVM内部结构JVM 调优策略(补充) GC垃圾回收算法1.引用计数法2.标记清除发3.标记压缩算法4.复制算法5.分代算法…

NQA测试机制—UDP Jitter测试

概念 UDP Jitter是以UDP报文为承载,通过记录在报文中的时间戳信息来统计时延、抖动、丢包的一种测试方法。Jitter(抖动时间)是指相邻两个报文的接收时间间隔减去这两个报文的发送时间间隔。 UDP Jitter测试的过程如下: 1. 源端&a…

ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

用了网上的办法: 1、修改listener.ora的参数,把动态的参数设置为静态的参数,红色标注部分 位置D:\oracle\product\10.2.0\db_1\NETWORK\ADMIN SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME PLSExtProc) (ORACLE_HOME D:\oracle\produ…

day34WEB 攻防-通用漏洞文件上传黑白盒审计逻辑中间件外部引用

目录 一,白盒审计-Finecms-代码常规-处理逻辑 黑盒思路:寻找上传点抓包修改突破获取状态码及地址 审计流程:功能点-代码文件-代码块-抓包调试-验证测试 二,白盒审计-CuppaCms-中间件-.htaccess 三,白盒审计-Metin…

3个精美的wordpress律师网站模板

暗红色WordPress律师事务所网站模板 演示 https://www.zhanyes.com/qiye/23.html 暗橙色WordPress律师网站模板 演示 https://www.zhanyes.com/qiye/18.html 红色WordPress律所网站模板 演示 https://www.zhanyes.com/qiye/22.html

机器学习第一个项目-----鸢尾花数据集加载及报错解决

项目步骤 如刚开始做,从 “项目开始” 看; 如遇到问题从 “问题” 开始看; 问题 报错如下 ModuleNotFoundError: No module named sklearn解决过程 查看官网,感觉可能是python版本和skilearn版本不匹配,更新一下p…

JVM-字节码文件的组成

Java虚拟机的组成 Java虚拟机主要分为以下几个组成部分: 类加载子系统:核心组件类加载器,负责将字节码文件中的内容加载到内存中。 运行时数据区:JVM管理的内存,创建出来的对象、类的信息等等内容都会放在这块区域中。…

静态代理IP该如何助力Facebook多账号注册运营?

在Facebook运营中,充分利用静态代理IP是多账号运营的关键一环。通过合理运用静态代理IP,不仅可以提高账号安全性,还能有效应对Facebook的算法和限制。以下是这些关键点,可以帮助你了解如何运用静态代理IP进行Facebook多账号运营&a…

Linux下的进程操作

进程概念 ps -elf:查看操作系统的所有进程(Linux命令) ctrl z:把进程切换到后台 crtl c:结束进程 fg:把进程切换到前台 获取进程进程号和父进程号 函数原型: pid_t getpid(void); //pid_t…

Java服务端使用freemarker+wkhtmltoimage生成Echart图片

目录 1.通过 freemarker 将ftl转成html 1.1 freemarker 手册: 1.2 添加freemarker maven依赖 1.3 添加 echart-test.ftl 模版文件 1.4 添加 FreemarkerTool 工具类 1.5 添加测试main方法 1.6 运行,生成echart-test-时间戳.html 文件 2. 通过wkhtmltoimage将html 转为p…

Java项目实战--瑞吉外卖DAY03

目录 P22新增员工_编写全局异常处理器 P23新增员工_完善全局异常处理器并测试 p24新增员工_小结 P27员工分页查询_代码开发1 P28员工分页查询_代码开发2 P22新增员工_编写全局异常处理器 在COMMON新增全局异常捕获的类,其实就是代理我们这些controlle。通过aop把…

TikTok直播对网络环境的要求是怎么样的

TikTok直播作为一种互动性强、实时性要求高的社交媒体形式,对网络环境有着一系列特定的需求。了解并满足这些需求,对于确保用户体验、提高直播质量至关重要。本文将深入探讨TikTok直播对网络环境的要求以及如何优化网络设置以满足这些要求。 TikTok直播的…

docker环境搭建及其安装常用软件

centos安装docker Install Docker Engine on CentOS | Docker Docs 下载docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install -y docker-ce docker-ce-cli containerd.io…

x-cmd pkg | go - Google 开发的开源编程语言

目录 简介首次用户技术特点竞品分析编译型语言解释型语言JavaWebAssebmly 进一步阅读 简介 Go 语言(或 Golang)是 Google 开发的开源编程语言,诞生于 2006 年。其设计目标是“兼具 Python 等动态语言的开发速度和 C/C 等编译型语言的性能与安…

万字图解 | 深入揭秘HTTP工作原理

大家好,我是「云舒编程」,今天我们来聊聊计算机网络面试之-(应用层HTTP)工作原理。 文章首发于微信公众号:云舒编程 关注公众号获取: 1、大厂项目分享 2、各种技术原理分享 3、部门内推 前言 想必不少同学在面试过程中&#xff0…

JVM内存问题排查

本文又名《对JVM一窍不通的我快速开始排查应用内存问题》。主要系统性地整理了排查思路,为大家遇到问题时提供全面的排查流程,不至于漏掉某些可能性误入歧途浪费时间。 基本原则 由于本文的定位是Cookbook,基本原则是让整个流程能够系统化规范化的同时将…