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

蓝桥杯Web应用开发-CSS3 新特性

news 2026/3/31 8:33:18

CSS3 新特性

专栏持续更新中

在前面我们已经学习了元素选择器、id 选择器和类选择器，我们可以通过标签名、id 名、类名给指定元素设置样式。
现在我们继续选择器之旅，学习 CSS3 中新增的三类选择器，分别是：
• 属性选择器
• 子元素伪类选择器
• UI 伪类选择器

新增属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。
在 CSS3 中新增了三种属性选择器，如下所示：

选择器描述
E[attr^=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>a[href^="#"] {color: rgb(179, 255, 0);}a[href$="org"] {color: rgb(195, 0, 255);}a[href*="un"] {background-color: rgb(0, 255, 149);color: white;}</style></head><body><ul><li><a href="#">本地链接</a></li><li><a href="https://www.baidu.com">百度</a></li><li><a href="https://developer.mozilla.org">MDN</a></li><li><a href="https://unsplash.com">Unsplash</a></li></ul></body>
</html>

在这里插入图片描述

• 在上面代码中，我们使用 a[href^=“#”] 去匹配 a 标签中 href 属性值以 # 开头的元素。
• 使用 a[href$=“org”] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
• 使用 a[href*=“un”] 去匹配 a 标签中 href 属性值包含 un 的元素。

子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。
在 CSS3 中，有以下几种子元素伪类选择器：

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 100px;height: 100px;margin-top: 10px;background-color: rgb(0, 255, 242);}div:nth-child(2) {background-color: rgb(0, 255, 128);}div:nth-of-type(4) {background-color: rgb(111, 0, 255);}</style></head><body><div></div><div></div><div></div><div></div></body>
</html>

在这里插入图片描述

• 在代码中，我们使用 div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。
• 使用 div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。

UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器。
在 CSS3 中有以下几种 UI 伪类选择器。

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。

相关文章：

蓝桥杯Web应用开发-CSS3 新特性

CSS3 新特性 专栏持续更新中 在前面我们已经学习了元素选择器、id 选择器和类选择器&#xff0c;我们可以通过标签名、id 名、类名给指定元素设置样式。 现在我们继续选择器之旅&#xff0c;学习 CSS3 中新增的三类选择器&#xff0c;分别是&#xff1a; • 属性选择器 • 子…...

编程日记 2024/2/12 18:33:47

MongoDB聚合：$unionWith

$unionWith聚合阶段执行两个集合的合并&#xff0c;将两个集合的管道结果合并到一个结果集传送到下一个阶段。合并后的结果文档的顺序是不确定的。 语法 { $unionWith: { coll: "<collection>", pipeline: [ <stage1>, ... ] } }要包含集合的所有文档不…...

编程日记 2024/2/12 18:29:43

人工智能三子棋-人机对弈-人人对弈,谁会是最终赢家？

✅作者简介&#xff1a;大家好我是原始豌豆&#xff0c;感谢支持。 &#x1f194;本文由 原始豌豆 原创 CSDN首发&#x1f412; 如需转载还请通知⚠ &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​ &#x1f4e3;系列专栏&#xff1a;C语言项目实践…...

编程日记 2024/2/12 18:28:42

【leetcode热题100】反转链表 II

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a;[1,4,3,2…...

编程日记 2024/2/12 18:25:38

谷歌 DeepMind 联合斯坦福推出了主从式遥操作双臂机器人系统增强版ALOHA 2

谷歌 DeepMind 联合斯坦福推出了 ALOHA 的增强版本 ——ALOHA 2。与一代相比&#xff0c;ALOHA 2 具有更强的性能、人体工程学设计和稳健性&#xff0c;且成本还不到 20 万元人民币。并且&#xff0c;为了加速大规模双手操作的研究&#xff0c;ALOHA 2 相关的所有硬件设计全部开…...

编程日记 2024/2/12 18:23:36

金融行业专题｜证券超融合架构转型与场景探索合集（2023版）

更新内容 更新 SmartX 超融合在证券行业的覆盖范围、部署规模与应用场景。新增操作系统信创转型、Nutanix 国产化替代、网络与安全等场景实践。更多超融合金融核心生产业务场景实践&#xff0c;欢迎阅读文末电子书。 在金融行业如火如荼的数字化转型大潮中&#xff0c;传统架…...

编程日记 2024/2/12 18:21:34

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上&#xff0c;笔者对C语言的知识和注意事项进行整理记录&#xff0c;便于后期查阅&#xff0c;反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用&#xff0c;然而发觉这些是编程语言所共通的作用&#…...

编程日记 2024/2/12 18:20:33

使用STM32Cubemx创建一个工程并且给出每一步的含义

...

编程日记 2024/2/12 18:17:31

C/C++模板初阶

目录 1. 泛型编程 2. 函数模板 2.1 函数模板概念 2.1 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 3. 类模板 3.1 类模板的定义格式 3.2 类模板的实例化 1. 泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int&…...

编程日记 2024/2/12 18:14:28

linux系统下vscode portable版本的c++/Cmake环境搭建001

linux系统下vscode portable版本的Cmake环境搭建 vscode portable 安装安装基本工具安装 build-essential安装 CMake final script code安装插件CMake Tools & cmakeC/C Extension Pack Testsettings,jsonCMakeLists.txt调试和运行工具 CG 目的&#xff1a;希望在获得一个新…...

编程日记 2024/2/12 18:11:25

【QT+QGIS跨平台编译】之三十一：【FreeXL+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

文章目录 一、FreeXL介绍二、文件下载三、文件分析四、pro文件五、编译实践一、FreeXL介绍 【FreeXL跨平台编译】：Windows环境下编译成果（支撑QGIS跨平台编译，以及二次研发） 【FreeXL跨平台编译】：Linux环境下编译成果（支撑QGIS跨平台编译，以及二次研发） 【FreeXL跨平台…...

编程日记 2024/2/12 18:09:23

2024年 前端JavaScript入门到精通 第一天

主要讲解JavaScript核心知识&#xff0c;包含最新ES6语法&#xff0c;从基础到API再到高级。让你一边学习一边练习&#xff0c;重点知识及时实践&#xff0c;同时每天安排大量作业&#xff0c;加深记忆&#xff0c;巩固学习成果。 1.1 基本软件与准备工作 1.2 JavaScript 案例 …...

编程日记 2024/2/12 18:07:21

155基于matlab 的形态学权重自适应图像去噪

基于matlab 的形态学权重自适应图像去噪&#xff1b;通过串并联的滤波降噪对比图&#xff0c;说明并联降噪的优越性。输出降噪前后图像和不同方法的降噪情况的信噪比。程序已调通&#xff0c;可直接运行。 155matlab 自适应图像降噪 串并联降噪 (xiaohongshu.com)...

编程日记 2024/2/12 18:05:19

操作系统——内存管理(附带Leetcode算法题LRU)

目录 1.内存管理主要用来干什么&#xff1f; 2.什么是内存碎片&#xff1f; 3.虚拟内存 3.1传统存储管理方式的缺点&#xff1f; 3.2局部性原理 3.3什么是虚拟内存&#xff1f;有什么用&#xff1f; 3.3.1段式分配 3.3.2页式分配 3.3.2.1换页机制 3.3.2.2页面置换算法…...

编程日记 2024/2/12 18:04:18

I/O多路复用简记

IO多路复用&#xff08;服务器如何处理多个socket的同时数据传输&#xff09;&#xff1a;1、select。2、poll。3、epoll。 select使用bitmap存socket文件描述符&#xff0c;由bitmap槽位的每一位为0或1决定对应序的socket连接是否有数据到来。由单线程&#xff08;多线程处理每…...

编程日记 2024/2/12 18:03:17

SPECCPU2017操作说明

1、依赖包下载 yum install gcc* gfortran* 2、将软件包放至被测机器 3、增加权限 chmod X install.sh 4、运行安装 ./install.sh 5、运行 引入编译时所需的环境变量和相关库文件 source shrc 进入/spec2017&#xff0c;执行 ./runcpu -c ../config/Example-gcc-linux-ar…...

编程日记 2024/2/12 17:59:13

openresty (nginx)快速开始

文章目录 一、什么是openresty&#xff1f;二、openresty编译安装1. 编译安装命令1.1 编译完成后路径1.2 常用编译选项解释 2. nginx配置文件配置2.1 nginx.conf模板 3. nginx常见配置一个站点配置多个域名nginx配置中location匹配规则 三、OpenResty工作原理OpenResty工作原理…...

编程日记 2024/2/12 17:55:09

相机图像质量研究(11)常见问题总结：光学结构对成像的影响--像差

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…...

编程日记 2024/2/12 17:51:04

【深度学习】基于多层感知机的手写数字识别

案例2&#xff1a;构建自己的多层感知机: MNIST手写数字识别 相关知识点: numpy科学计算包&#xff0c;如向量化操作&#xff0c;广播机制等 1 任务目标 1.1 数据集简介 ​ MNIST手写数字识别数据集是图像分类领域最常用的数据集之一&#xff0c;它包含60,000张训练图片&am…...

编程日记 2024/2/12 17:49:01

给定n，m（200），构造一个n*m的矩阵a，使得每个4*4的子矩阵，左上角2*2的子矩阵的异或和等于右下角的，左下角的异或和等于右上角的

题目 #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e18 5, maxm 4e4 5, mod 998244353…...

编程日记 2024/2/12 17:47:59

Windows 11 + CUDA 11.7 环境下，TensorRT 8.5.2.2 保姆级安装与配置避坑指南

Windows 11 CUDA 11.7 环境下 TensorRT 8.5.2.2 终极安装指南 刚接触深度学习推理优化的开发者&#xff0c;往往会在环境配置阶段耗费大量时间。TensorRT作为NVIDIA官方推出的高性能推理库&#xff0c;能够显著提升模型在NVIDIA GPU上的运行效率。本文将手把手带你完成Windows…...

编程新知 2026/3/31 7:59:26

uniapp 如何实现google登录-安卓端

uniapp 如何实现google登录-安卓端 本文只讲解uniapp安卓端如何获取到idToken来实现登录&#xff0c;ios使用uniapp官方方法可以获取 海外app貌似最常用的就是邮箱登录&#xff0c;在app上表现出来最常用的就是谷歌一键登录&#xff0c;或者邮箱加网页验证&#xff1b;google登…...

编程新知 2026/3/31 7:25:10

SAP传输请求实战指南：从SE10到STMS的完整流程解析

1. SAP传输请求&#xff1a;为什么需要它&#xff1f; 刚接触SAP系统的朋友可能会疑惑&#xff1a;为什么需要传输请求这个功能&#xff1f;简单来说&#xff0c;就像搬家时需要打包物品一样&#xff0c;当我们在开发环境(DEV)完成了某项功能的开发或配置后&#xff0c;需要把这…...

编程新知 2026/3/31 6:26:40

别只盯着训练！DeePMD-kit模型压缩(graph.pb)实战：让分子动力学模拟速度提升10倍

突破计算瓶颈&#xff1a;DeePMD-kit模型压缩技术实战指南 当你在分子动力学模拟中投入数周时间训练出一个高精度DeePMD模型后&#xff0c;是否遇到过这样的困境&#xff1a;想要扩大模拟体系规模或延长模拟时间&#xff0c;却受限于计算资源的瓶颈&#xff1f;模型压缩技术正是…...

编程新知 2026/3/31 5:54:30

GLM-4.1V-9B-Base行业落地：建筑图纸局部区域语义理解与标注建议

GLM-4.1V-9B-Base行业落地&#xff1a;建筑图纸局部区域语义理解与标注建议 1. 建筑行业的AI视觉理解需求 建筑设计和施工过程中&#xff0c;图纸理解与标注是一项耗时且容易出错的工作。传统方式需要经验丰富的工程师手动识别图纸中的各个元素&#xff0c;不仅效率低下&…...

编程新知 2026/3/31 5:36:20

Mask2Former性能对比分析：R50到Swin-L各主干网络的优劣选择

Mask2Former性能对比分析&#xff1a;R50到Swin-L各主干网络的优劣选择 【免费下载链接】Mask2Former Code release for "Masked-attention Mask Transformer for Universal Image Segmentation" 项目地址: https://gitcode.com/gh_mirrors/ma/Mask2Former Ma…...

编程新知 2026/3/31 4:21:08

3大突破策略：Bypass Paywalls Clean 2024全场景应用指南

3大突破策略&#xff1a;Bypass Paywalls Clean 2024全场景应用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;付费墙已成为知识获取的主要障碍…...

编程新知 2026/3/31 3:46:47

移植U-Boot驱动到XSDK裸机程序：以RTL8211FS在Zynq上的网络调试为例

移植U-Boot驱动到XSDK裸机程序&#xff1a;以RTL8211FS在Zynq上的网络调试为例 在嵌入式开发中&#xff0c;驱动移植是一项常见但极具挑战性的任务。当我们需要将已经在U-Boot或Linux环境下稳定工作的硬件驱动移植到裸机环境时&#xff0c;往往会遇到各种意料之外的问题。本文…...

编程新知 2026/3/31 3:12:16

LangChain工具绑定避坑指南：为什么你的bind_tools不工作？

LangChain工具绑定深度解析&#xff1a;从原理到实战的避坑指南 当你第一次尝试在LangChain中绑定自定义工具时&#xff0c;可能会遇到各种令人困惑的问题——工具明明定义了却无法调用&#xff0c;参数传递总是出错&#xff0c;或者LLM完全无视你的工具指令。这些问题往往不是…...

编程新知 2026/3/31 2:48:08

球机器人研究报告【202600001】

文章目录球机器人研究报告综合分析多智能体推箱子训练&#xff08;第100代/第300代&#xff09;一、意识流分析&#xff08;神经网络脉冲活动&#xff09;1. 热图&#xff08;consciousness_agent2_gen100_ep0_heatmap.png&#xff09;2. PCA&#xff08;主成分分析&#xff0c…...

编程新知 2026/3/31 2:13:24