当前位置: 首页 > news >正文

【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析:分类、应用与技巧

大会官网:www.cammic.org

大会时间:2025年3月21-23日

大会地点:中国-上海(上海大学宝山校区北大门乐乎新楼)

简介

第五届应用数学、建模与智能计算(CAMMIC 2025)将于2025年3月21-23日在中国上海召开。本次由上海大学主办。该会议已成功举办四届,吸引海内外500余名专家学者参会。会议将围绕"应用数学””建模与仿真“”智能计算“的最新研究领域,为来自国内外高等院校、科学研究所、企事业单位的专家、教授、学者、工程师等提供一个分享专业经验,扩大专业网络,面对面交流新思想以及展示研究成果的国际平台,探讨本领域发展所面临的关键性挑战问题和研究方向,以期推动该领域理论、技术在高校和企业的发展和应用,也为参会者建立业务或研究上的联系以及寻找未来事业上的全球合作伙伴。

目录

前言

一、CSS伪类选择器分类

1. 动态伪类选择器

常见的动态伪类

示例

2. 结构伪类选择器

常见的结构伪类

示例

3. 语言和否定伪类选择器

常见的语言和否定伪类

示例

4. UI伪类选择器

常见的UI伪类

示例

二、总结


前言

本篇博客将深入讲解CSS伪类选择器,按照功能将其分类为:动态伪类结构伪类语言和否定伪类、以及UI伪类,并提供详细的用法、示例和注意事项,帮助更好地掌握这些强大的工具。


一、CSS伪类选择器分类

1. 动态伪类选择器

动态伪类主要用于控制元素在不同交互状态下的样式变化,通常与用户的鼠标操作或键盘操作相关。

常见的动态伪类
  • :hover —— 悬停状态
  • :active —— 被点击或按下的状态
  • :focus —— 获得焦点的状态
  • :focus-within —— 如果某元素或其子元素获得焦点
  • :focus-visible —— 当元素具有焦点且被键盘聚焦时
示例
<button>点击我</button>
<a href="#">悬停我</a>
<input type="text" placeholder="输入文本">
/* 悬停状态 */
a:hover {color: red;
}/* 点击状态 */
button:active {background-color: green;
}/* 焦点状态 */
input:focus {border: 2px solid blue;
}/* 焦点内状态 */
div:focus-within {border: 2px solid purple;
}/* 仅当键盘聚焦时显示焦点 */
input:focus-visible {outline: 3px solid orange;
}

注意事项

  • :hover:active通常用于交互元素(如按钮、链接),能够给用户提供反馈。
  • :focus-within特别适用于表单元素,能够让整个父容器在任意子元素获取焦点时被高亮显示。

2. 结构伪类选择器

结构伪类选择器帮助你根据元素在文档中的位置或其父子关系来选中元素,而不依赖于元素的内容。

常见的结构伪类
  • :first-child —— 父元素的第一个子元素
  • :last-child —— 父元素的最后一个子元素
  • :nth-child(n) —— 父元素中第n个子元素
  • :nth-last-child(n) —— 从后往前数的第n个子元素
  • :only-child —— 父元素中唯一的子元素
  • :nth-of-type(n) —— 同类型元素的第n个子元素
  • :first-of-type —— 同类型元素的第一个
  • :last-of-type —— 同类型元素的最后一个
  • :empty —— 没有任何子元素的元素
示例
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>
/* 父元素的第一个子元素 */
ul li:first-child {color: blue;
}/* 父元素的最后一个子元素 */
ul li:last-child {color: red;
}/* 第2个子元素 */
ul li:nth-child(2) {font-weight: bold;
}/* 父元素中唯一的子元素 */
div:only-child {background-color: lightgray;
}/* 只有第一项是li标签 */
ul li:first-of-type {font-size: 18px;
}

注意事项

  • :nth-child()可以接受数字、关键字odd(奇数)和even(偶数),也支持公式(如2n表示每两个元素)。
  • 使用:nth-of-type()时,确保你选择的是同一类型的元素,如只选择<li>标签而不受其他标签影响。

3. 语言和否定伪类选择器

语言和否定伪类选择器主要用于通过元素的语言、类名、或者排除某些条件来选择元素。

常见的语言和否定伪类
  • :lang(language) —— 根据元素的语言属性选择元素
  • :not(selector) —— 排除与给定选择器匹配的元素
示例
<p lang="en">This is an English paragraph.</p>
<p lang="fr">C'est un paragraphe en français.</p>
/* 选择所有英语段落 */
p:lang(en) {color: blue;
}/* 排除所有具有class="exclude"的元素 */
div:not(.exclude) {background-color: yellow;
}

注意事项

  • :lang()伪类选择器非常适用于国际化(i18n)网页设计,允许你根据不同的语言应用不同的样式。
  • :not()伪类可以用来排除不想匹配的元素,非常灵活,但要注意性能问题,在复杂选择器中使用时要谨慎。

4. UI伪类选择器

UI伪类选择器用于根据元素的UI状态(如是否选中、是否禁用等)进行选择。

常见的UI伪类
  • :checked —— 选中状态(如复选框或单选框)
  • :disabled —— 禁用状态
  • :enabled —— 启用状态
  • :required —— 必填状态
  • :optional —— 可选状态
  • :valid —— 表单元素内容有效
  • :invalid —— 表单元素内容无效
示例
<input type="checkbox" checked> 选中
<input type="checkbox"> 未选中
<input type="text" required>
/* 选中状态 */
input:checked {background-color: lightgreen;
}/* 禁用状态 */
input:disabled {background-color: lightgray;
}/* 必填状态 */
input:required {border: 2px solid red;
}

注意事项

  • :checked常用于复选框和单选框,能够控制它们在选中状态时的样式。
  • :required:optional是表单控件的伪类,常用于表单验证时应用不同样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI伪类</title><style>/* 选中勾选的复选或者单选框 */input:checked{width:30px;height:30px;}/* 选中可用的输入框 */input:enabled{background-color:green;}/* 选中禁用的输入框 */input:disabled{background-color:grey;}input:required {border: 20px solid red;
}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="password" required></input><input type="text" disabled></input>
</body>
</html>

 


二、总结

CSS伪类选择器为我们提供了强大的样式控制功能。通过动态伪类、结构伪类、语言和否定伪类以及UI伪类,我们可以轻松地根据元素的不同状态、位置、类型或语言来应用样式。

掌握这些伪类选择器的用法,能够让你的页面更加智能和富有交互性,提升用户体验。在实际开发中,伪类选择器不仅减少了对JavaScript的依赖,还大大简化了样式的管理和实现。

通过合理运用这些选择器,你可以在不增加额外复杂度的情况下,让你的网页更具表现力和可访问性。

相关文章:

【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析:分类、应用与技巧

大会官网&#xff1a;www.cammic.org 大会时间&#xff1a;2025年3月21-23日 大会地点&#xff1a;中国-上海&#xff08;上海大学宝山校区北大门乐乎新楼&#xff09; 简介 第五届应用数学、建模与智能计算&#xff08;CAMMIC 2025&#xff09;将于2025年3月21-23日在中国…...

常用查找算法整理(顺序查找、二分查找、哈希查找、二叉排序树查找、平衡二叉树查找、红黑树查找、B树和B+树查找、分块查找)

常用的查找算法&#xff1a; 顺序查找&#xff1a;最简单的查找算法&#xff0c;适用于无序或数据量小的情况&#xff0c;逐个元素比较查找目标值。二分查找&#xff1a;要求数据有序&#xff0c;通过不断比较中间元素与目标值&#xff0c;将查找范围缩小一半&#xff0c;效率…...

Express 中 res 响应方法详解

一、res.send() 1. 功能 该方法用于发送各种类型的响应&#xff0c;包括字符串、对象、数组、Buffer 等。它会自动设置响应的 Content-Type 头。 2. 示例代码 const express require("express");const app express();app.get("/", (req, res) > {…...

DeepAR:一种用于时间序列预测的深度学习模型

介绍 DeepAR是一种基于递归神经网络&#xff08;RNN&#xff09;的时间序列预测模型&#xff0c;由亚马逊在2017年提出。它特别适用于处理多变量时间序列数据&#xff0c;并能够生成概率预测。DeepAR通过联合训练多个相关时间序列来提高预测性能&#xff0c;从而在实际应用中表…...

权限模型深度解析:RBAC vs ABAC vs PBAC vs TBAC,如何选择最适合的方案?

在数字化系统的安全架构中&#xff0c;权限管理如同一把“隐形钥匙”&#xff0c;既需精准控制访问边界&#xff0c;又要灵活适配复杂多变的业务需求。从传统的角色划分到动态属性策略&#xff0c;从合规驱动的集中管控到任务流程的临时授权&#xff0c;RBAC、ABAC、PBAC、TBAC…...

Windows逆向工程入门之堆栈结构与信息获取

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. 堆栈结构基础 堆栈的主要操作&#xff1a; 2. 代码功能解析 2.1 加载 ntdll.dll 2.2 获取 NtQueryInformationThread 函数指针 2.3 调用 NtQueryInformationThread 获取线程信息…...

【c++初阶】类和对象②默认成员函数以及运算符重载初识

目录 ​编辑 默认成员函数&#xff1a; 构造函数 构造函数的特性&#xff1a; 析构函数&#xff1a; 拷贝构造函数&#xff1a; 1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用&#xff0c;使用传值方式编译器直接报…...

【做一个微信小程序】校园地图页面实现

前言 上一个教程我们实现了小程序的一些的功能&#xff0c;有背景渐变色&#xff0c;发布功能有的呢&#xff0c;已支持图片上传功能&#xff0c;表情和投票功能开发中&#xff08;请期待&#xff09;。下面是一个更高级的微信小程序实现&#xff0c;包含以下功能&#xff1a;…...

成熟开发者需具备的能力

精业务 • 指深入理解和熟悉所开发软件的业务逻辑和需求。 • 开发者需要明确软件要解决的问题、面向的用户群体以及核心功能等。 • 精业务有助于开发者更好地设计系统架构、编写符合业务需求的代码&#xff0c;并能根据业务变化灵活调整开发计划。 懂原理 • 指掌握编程的基…...

计算机毕业设计--基于深度学习技术(Yolov11、v8、v7、v5)算法的高效人脸检测模型设计与实现(含Github代码+Web端在线体验界面)

基于深度学习技术&#xff08;Yolov11、v8、v7、v5&#xff09;算法的高效人脸检测模型 Yolo算法应用之《基于Yolo的花卉识别算法模型设计》&#xff0c;请参考这篇CSDN作品&#x1f447; 计算机毕业设计–基于深度学习技术&#xff08;Yolov11、v8、v7、v5&#xff09;算法的…...

力扣做题记录 (二叉树)

二叉树 打算先来了解二叉树基础&#xff0c;都是简单题&#xff0c;目的是熟悉代码格式和解题基础思路。 1、二叉树最大深度 二叉树最大深度 方法一、深度搜索 直接用原函数做递归&#xff0c;比较简单 /*** Definition for a binary tree node.* struct TreeNode {* …...

机试刷题_字符串的排列【python】

题目&#xff1a;字符串的排列 from os import dup # # 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可 # # # param str string字符串 # return string字符串一维数组 # class Solution:def backtrack(self,res,state,choi…...

百度智能云—千帆 ModelBuilder API的简单调用(Java)

百度简介 百度&#xff08;Baidu&#xff09;是拥有强大互联网基础的领先AI公司。百度愿景是&#xff1a;成为最懂用户&#xff0c;并能帮助人们成长的全球顶级高科技公司。 “百度”二字&#xff0c;来自于八百年前南宋词人辛弃疾的一句词&#xff1a;众里寻他千百度。这句话…...

unity学习43:子状态机 sub-state machine

目录 1sub-state machine子状态机 1.1 创建 sub-state machine 1.2 sub-state machine 内容 1.3 子状态机的应用 2 子状态机不同于blend tree的嵌套 3 应用例子&#xff1a;若角色拿不同武器的动画设计&#xff0c;可以使用2种方法 3.1 在1个图层layer里&#xff0c;使用…...

Qt MainWindow

文章目录 0. 概述1. 菜单栏 QMenuBar1.1 例子1&#xff0c;使用图形化界面1.2 例子2&#xff0c;使用代码创建1.3 例子3&#xff0c;添加快捷键1.4 例子4&#xff0c;添加子菜单1.5 例子5&#xff0c;添加分割线和图标1.6 内存泄漏问题 2. 工具栏 QToolBar2.1 例子1&#xff0c…...

GDB QUICK REFERENCE (GDB 快速参考手册)

GDB QUICK REFERENCE {GDB 快速参考手册} References GDB QUICK REFERENCE GDB Version 4 https://users.ece.utexas.edu/~adnan/gdb-refcard.pdf 查看方式&#xff1a;在新标签页中打开图片 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/ [2] gdb-refc…...

【数据结构】 栈和队列

在计算机科学的世界里&#xff0c;数据结构是构建高效算法的基础。栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;作为两种基本且重要的数据结构&#xff0c;在软件开发、算法设计等众多领域都有着广泛的应用。今天&#xff0c;我们就来深入探讨一下栈和…...

AI视频创作教程:如何用AI让古画动起来。

事情缘由&#xff1a; 如果是简单的图&#xff0c;找原图直接写提示词即可。 如果碰到多人多活动的图&#xff0c;直接出的效果会很不好&#xff0c;那么该怎么做呢&#xff1f; 图片分模块 首先&#xff0c;复杂部分的图&#xff0c;把长图分多个模块。 比如这张图&#xff0…...

撕碎QT面具(1):Tab Widget转到某个Tab页

笔者未系统学过C语法&#xff0c;仅有Java基础&#xff0c;具体写法仿照于大模型以及其它博客。自我感觉&#xff0c;如果会一门对象语言&#xff0c;没必要先刻意学C&#xff0c;因为自己具有对象语言的基础&#xff0c;等需要用什么再学也不迟。毕竟不是专门学C去搞算法。 1…...

DeepSeek24小时写作机器人,持续创作高质量文案

内容创作已成为企业、自媒体和创作者的核心竞争力。面对海量的内容需求&#xff0c;人工创作效率低、成本高、质量参差不齐等问题日益凸显。如何在有限时间内产出高质量内容&#xff1f;DeepSeek写作机器人&#xff0c;一款24小时持续创作的智能工具&#xff0c;为企业和个人提…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...