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

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

news 2026/2/11 3:53:34

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53