伪类与伪元素

伪类与伪元素

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述，引用标准中的话就是：CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。

文档树又称标准流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

一、常见标准流排版规则

块级元素：从上往下，垂直布局，独占一行
行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

二、伪类

为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
作用：设置鼠标悬停在元素上时的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式等等

1. 状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

  • 常见的状态伪类
    • :link：应用于未被访问过的链接
    • :hover：应用于鼠标悬停到的元素
    • :active：应用于被激活的元素
    • :visited：应用于被访问过的链接，与:link互斥
    • :focus：应用于拥有键盘输入焦点的元素
  • 注意：这几个伪类同时出现在同一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，导致效果失效。
    • a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。
      (意思是必须先写a:link 和 a:visited再写 :hover）
    • a:active 必须在 CSS 定义中的 a:hover 之后才能生效。
      (意思是必须先写a:hover再写 :active）
<style>/* 未访问的链接 */a:link {color: red;}/* 已访问的链接  */a:visited {color: green;}/* 鼠标悬停链接  */a:hover {color: hotpink;}/* 已选择的链接*/a:active {color: blue;}</style>
  • 伪类和 CSS 类

    • 将鼠标悬停在类highlight上时，会改变颜色

       a.highlight:hover {color: red;}

    • 悬停在<div>上

       div:hover {background-color: blue;}

    • 把鼠标悬停到 <div> 元素以显示 <h1>元素（类似工具提示的效果）

       h1 {display: none;background-color: green;padding: 25px;}div:hover h1 {display: block;}

2. 结构伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

  • 作用与优势

    • 作用：根据元素在HTML中的结构关系查找元素
    • 优势：减少对HTML中类的依赖，有利于保持代码整洁
    • 场景：常用于查找某上级选择器中的子元素

  • 选择器

    选择器说明
    E:first-child{}匹配上级元素中第一个子元素，并且是E元素
    E:last-child{}匹配上级元素中最后一个子元素，并且是E元素
    E:nth-child(n){}匹配上级元素中第n个子元素，并且是E元素
    E:nth-last-child(n){}匹配上级元素中倒数第n个子元素，并且是E元素

  • 元素的类型：

    :nth-of-type() 规定属于其上级元素的第n个 指定元素；
:nth-last-of-type() 从元素的最后一个开始计算,规定属于其上级元素的指定元素；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择它的上级元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
:empty 选择的元素里面没有任何内容。
:disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 <input> 元素。
:optional选择不带 "required" 属性的 <input> 元素。
:focus选择获得焦点的 <input> 元素。

    	<style>/* 选中第一个 */li:first-child {background-color: green;}/* 最后一个 */li:last-child {background-color: green;}/* 任意一个 */li:nth-child(3) {background-color: green;}li:nth-last-child(4) {background-color: green;}/* 偶数 */li:nth-child(2n)/* 奇数 */li:nth-child(2n+1)/* 找到前5个 */li:nth-child(-n+5)/* 4的倍数 */li:nth-child(4n) {background-color: green;}</style>

三、伪元素

创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)
作用：设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容等等

1. 使用伪元素在网页中创建内容

  • 伪元素：一般页面中的非主体内容可以使用伪元素

  • 区别：

    • 元素：HTML设置的标签
    • 伪元素：由CSS模拟出的标签效果

  • 种类

    伪元素作用
    ::before在元素的前面添加一个伪元素
    ::after在元素的最后添加一个伪元素
    first-letter选择元素的首字母
    first-line选择元素的首行
    selection选择元素被选中的部分

  • 注意点
    1）必须设置content属性才能生效
    2）伪元素默认是行内元素
    3）CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

2. ::first-line和::first-letter

对于::first-line和::first-letter，需要注意的是，::first-line和::first-letter 伪元素只能应用于块级元素

  • 以下属性适用于 ::first-line 伪元素：

    • 字体属性
    • 颜色属性
    • 背景属性
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

  • 以下属性适用于 ::first-letter 伪元素：

    • 字体属性
    • 颜色属性
    • 背景属性
    • 外边距属性
    • 内边距属性
    • 边框属性
    • text-decoration
    • vertical-align（仅当 “float” 为 “none”）
    • text-transform
    • line-height
    • float
    • clear

3. content属性的类别

content属性含义
none设置 content 为空值。
normal在 :before 和:after伪类元素中会被视为 none，即也是空值。
counter设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是’decimal’——十进制数字）
attr(attribute)将元素的 attribute 属性以字符串形式返回。
string设置文本内容
open-quote设置前引号
close-quote设置后引号
no-open-quote移除内容的开始引号
no-close-quote移除内容的闭合引号
url(url)设置某种媒体（图像，声音，视频等内容）的链接地址
inherit指定的 content 属性的值，应该从父元素继承

需要注意的是，伪元素不是真正的 HTML 元素，它们只是 CSS 中的一种选择器，用于选中元素的某个子元素或者某个位置。因此，在 HTML 中无法直接操作伪元素，也无法使用 JavaScript 来操作伪元素。

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

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

相关文章

1780_添加鼠标右键空白打开命令窗功能

1780_添加鼠标右键空白打开命令窗功能

全部学习汇总&#xff1a; GitHub - GreyZhang/windows_skills: some skills when using windows system. 经常执行各种脚本&#xff0c;常常需要切换到命令窗口中输入相关的命令。从开始位置打开cmd然后切换目录是个很糟糕的选择&#xff0c;费时费力。其实Windows 7以及Windo…
阅读更多...
经管博士科研基础【19】齐次线性方程组

经管博士科研基础【19】齐次线性方程组

1. 线性方程组 2. 非线性方程组 非线性方程，就是因变量与自变量之间的关系不是线性的关系，这类方程很多，例如平方关系、对数关系、指数关系、三角函数关系等等。求解此类方程往往很难得到精确解，经常需要求近似解问题。相应的求近似解的方法也逐渐得到大家的重视。 3. 线…
阅读更多...
vue3 封装千分位分隔符自定义指令

vue3 封装千分位分隔符自定义指令

toLocaleString作用&#xff1a;在没有指定区域的基本使用时&#xff0c;返回使用默认的语言环境和默认选项格式化的字符串。可点击进入MDN查看 // 千分位分隔符指令 import { Directive, DirectiveBinding } from vueconst thousandSeparator: Directive {mounted(el: any, …
阅读更多...
Win10搭建VisualSvn Server

Win10搭建VisualSvn Server

Win10搭建VisualSvn Server 目录 Win10搭建VisualSvn Server一、下载VisualSvn Server安装包二、安装VisualSvn Server三、配置和使用VisualSVN Server四、添加用户及权限设定方法五、创建目录及配置权限 1、服务端&#xff1a;有集成了Subversion和Apache、安装使用非常简单且…
阅读更多...
Redis从基础到进阶篇（三）----架构原理与集群演变

Redis从基础到进阶篇（三）----架构原理与集群演变

目录 一、缓存淘汰策略 1.1 LRU原理 1.2 案例分析 1.3 Redis缓存淘汰策略 1.3.1 设置最⼤缓存 1.3.2 淘汰策略 二、Redis事务 2.1 Redis事务典型应⽤—Redis乐观锁 2.2 Redis事务介绍 2.3 事务命令 2.3.1 MULTI 2.3.2 EXEC 2.3.3 DISCARD 2.3.4 WATCH 2.3.5 UNW…
阅读更多...
Flutter之hydrated_bloc源码分析

Flutter之hydrated_bloc源码分析

Flutter_Bloc是状态管理组件，hydrated_bloc是 Flutter_Bloc的扩展，它可以在APP重启的情况下，自动记录上次APP的状态。android中可以使用SharePreference来实现状态记录，在Flutter之hydrate_bloc组件入门指南一文中已经讲解了其基本用法，本篇博文就不对其原理进行简单分析，…
阅读更多...
【GitLab私有仓库】在Linux上用Gitlab搭建自己的私有库并配置cpolar内网穿透

【GitLab私有仓库】在Linux上用Gitlab搭建自己的私有库并配置cpolar内网穿透

文章目录 前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名 7. 测试访问二级子域名 前言 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xf…
阅读更多...
视频汇聚/视频云存储/视频监控管理平台EasyCVR部署后无法正常启用是什么问题？该如何解决？

视频汇聚/视频云存储/视频监控管理平台EasyCVR部署后无法正常启用是什么问题？该如何解决？

安防监控/视频监控/视频汇聚平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;视频云存储/安防监控汇聚平台EasyCVR支持多种播放协议&#xff0c;包括&#xff1a;HLS、HTTP-FLV、WebSoc…
阅读更多...
MavenCentral库发布记录

MavenCentral库发布记录

最近发布了 Android 路由库 URouter&#xff0c;支持 AGP8、ActivityResult启动等特性。 把提交到 Maven Central 过程记录一下。 一、注册 Sonatype 账号&#xff0c;新建项目 注册 https://​​issues.sonatype.org 登录后&#xff0c;新建项目&#xff1a; 相关选项&…
阅读更多...
Stable Diffusion 多视图实践

Stable Diffusion 多视图实践

此教程是基于秋叶的webui启动器 1.Stable Diffsuion 使用多视图需要准备一个多角度open pose 图 我给大家提供一个可使用的。 2.需要添加图片到到controlnet当中，不要选择预处理器，选择模型为openpose的模型，然后需要点选同步图片尺寸。 3.然后填写关键字可以参照一下这个…
阅读更多...
设计模式概念学习

设计模式概念学习

创建类型 单例模式 饿汉 构建时就创建 懒汉 单线程-访问到的时候才创建多线程-低效率 做法&#xff1a;加锁->若未创建则创建->获取资源->解锁 缺点&#xff1a;效率低&#xff0c;每次访问之前都要加锁&#xff0c;资源创建之后不能被同时被多个线程访问多线程-…
阅读更多...
通过安装cpolar内网穿透在Kali上实现SSH远程连接的步骤指南

通过安装cpolar内网穿透在Kali上实现SSH远程连接的步骤指南

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过cpolar 内网穿透软件实现ssh 远程连接kali! 1. 启动kali ssh 服务 默认新安装的kali系统会关闭ssh 连接服务,我们通…
阅读更多...
智慧导览|智能导游系统|AR景区导览系统|景区电子导览

智慧导览|智能导游系统|AR景区导览系统|景区电子导览

随着文旅市场的加快复苏&#xff0c;以及元宇宙、VR、AR、虚拟数字人等新兴技术的快速发展&#xff0c;文旅行业也正在加快数字化转型的步伐&#xff0c;向智慧景区建设迈进。为满足不同年龄段游客的游览需要&#xff0c;提升旅游服务体验&#xff0c;越来越多的旅游景区、博物…
阅读更多...
系统架构设计师考试——论文模板参考（900字）

系统架构设计师考试——论文模板参考（900字）

论文大纲 摘要 正文第一段第二段第三段第四段第五段第六段第七段 摘要 本文以我参与的某公司xx项目为例&#xff0c;论述了xx&#xff08;论文题目要求&#xff09;。该项目的目标是xx&#xff08;产品能力&#xff09;&#xff0c;实现xx&#xff08;主要功能&#xff09;&am…
阅读更多...
UDP和TCP协议报文格式详解

UDP和TCP协议报文格式详解

在初识网络原理(初识网络原理_蜡笔小心眼子&#xff01;的博客-CSDN博客)这篇博客中,我们简单的了解了一下TCP/IP五层网络模型,这篇博客将详细的学习一下五层网络模型中传输层的两个著名协议:UDP和TCP 目录 一, 传输层的作用 二, UDP 1,UDP协议的特点 2,UDP报文格式 三, TC…
阅读更多...
什么是websockret连接

什么是websockret连接

什么是WebSocket WebSocket&#xff0c;是一种网络传输协议&#xff0c;位于 OSI 模型的应用层。可在单个 TCP 连接上进行全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&am…
阅读更多...
An Efficient Memory-Augmented Transformer for Knowledge-Intensive NLP Tasks

An Efficient Memory-Augmented Transformer for Knowledge-Intensive NLP Tasks

本文是LLM系列文章&#xff0c;针对《An Efficient Memory-Augmented Transformer for Knowledge 一种用于知识密集型NLP任务的高效内存增强转换器 摘要1 引言2 相关工作3 高效内存增强Transformer4 EMAT的训练流程5 实验6 分析7 结论局限性 摘要 获取外部知识对于许多自然语言…
阅读更多...
OpenCV（二十）：图像卷积

OpenCV（二十）：图像卷积

1.图像卷积原理 图像卷积是一种在图像上应用卷积核的操作。卷积核是一个小的窗口矩阵&#xff0c;它通过在图像上滑动并与图像的像素进行逐元素相乘&#xff0c;然后求和来计算新图像中每个像素的值。通过滑动卷积核并在图像上进行逐像素运算&#xff0c;可以实现一系列图像处理…
阅读更多...
（笔记七）利用opencv进行形态学操作

（笔记七）利用opencv进行形态学操作

&#xff08;1&#xff09;程序清单 形态学操作是一种图像处理技术&#xff0c;它基于数学形态学理论&#xff0c;用于改变图像的形状和结构。它主要通过结构元素的腐蚀和膨胀操作来实现。 #!/usr/bin/env python # -*- coding:utf-8 -*- """ author: LIFEI t…
阅读更多...
Vue生成多文件pdf准考证

Vue生成多文件pdf准考证

这是渲染的数据 这是生成的pdf文件&#xff0c;直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdfpdf.js文件 import html2canvas from "html2canvas"; import jsPDF …
阅读更多...
最新文章

Copyright @ 2022~2023