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

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验证无效。

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

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

相关文章

c++二叉树寒假特训题目(1)

大家好&#xff0c;我是周曦&#xff0c;今天给大家推荐一些二叉树题目。 题目 二叉树存储 这道题是道水题&#xff0c;找找规律ok&#xff0c;本人代码10行。 淘汰赛 这道题推荐使用桶数组 做比较合适&#xff08;就是有点绕&#xff09;。 二叉树深度 这题是一道深搜题&a…

安装newman显示required node version >=16解决办法

直接安装对应版本就行&#xff0c;我的Node.js是14.16.0的版本&#xff0c;newman安装5.2.2的就不会出错。 npm install -g newman5.2.2

精选30个炫酷的数据可视化大屏(含源码),拿走就用!

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。 “大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。 原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣。 大屏数据可视化目前主要有信息展示、数据分…

警惕“中等数字化陷阱”,大力发扬先进基础设施“长板”

上世纪七、八十年代&#xff0c;拉美国家发展由富转穷&#xff0c;人均GDP发展至3000美金左右就开始停滞不前。研究界将这一现象归结为一个极具争议的概念——“中等收入陷阱”。 如今&#xff0c;在我国数字化发展当中&#xff0c;也有一种“中等数字化陷阱”正露出苗头&…

Flutter 网络请求之Dio库

Flutter 网络请求之Dio库 前言正文一、配置项目二、网络请求三、封装① 单例模式② 网络拦截器③ 返回值封装④ 封装请求 四、结合GetX使用五、源码 前言 最近再写Flutter系列文章&#xff0c;在了解过状态管理之后&#xff0c;我们再来学习一下网络请求。 正文 网络请求对于一…

ICLR 2024 | Mol-Instructions: 面向大模型的大规模生物分子指令数据集

发表会议&#xff1a;ICLR 2024 论文标题&#xff1a;Mol-Instructions: A Large-Scale Biomolecular Instruction Dataset for Large Language Models 论文链接&#xff1a;https://arxiv.org/pdf/2306.08018.pdf 代码链接&#xff1a;https://github.com/zjunlp/Mol-Instruct…

QT上位机:串口调试助手

前言 上位机的简单编写可以帮我们测试并完善平台&#xff0c;QT作为一款跨平台的GUI开发框架&#xff0c;提供了非常丰富的常用串口api。本文先从最简单的串口调试助手开始&#xff0c;编写平台软件的串口控制界面 工程配置 QT 串口通信基于QT的QSerialPort类&#xff0c;先在…

AR人脸106240点位检测解决方案

美摄科技针对企业需求推出了AR人脸106/240点位检测解决方案&#xff0c;为企业提供高效、精准的人脸识别服务&#xff0c;采用先进的人脸识别算法和机器学习技术&#xff0c;通过高精度、高速度的检测设备&#xff0c;对人脸进行快速、准确地定位和识别。该方案适用于各种应用场…

上位机图像处理和嵌入式模块部署(统计函数执行时间)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 和pc上位机相比较&#xff0c;嵌入式设备的计算资源很多时候都是不足的。但是&#xff0c;嵌入式设备胜在稳定性和成本上面&#xff0c;这方面又是…

一些基础函数

链表 ListNode* pnew ListNode(0,head); 栈和队列 stack—— stack<int> st; st.push(1); st.push(2); // st: 1 2 st.top(); // 2 st.size(); // 2 st.pop(); // st: 1 st.empty(); // false queue—— queue<int> que; que.push(1); que.push(2); // que: …

python 动态数据 展示 ,数据是由51单片机发送过来的,温度传感器。

import tkinter as tk import randomimport seriallis[] for i in range(50):lis.append(i1) # 打开串行端口 ser serial.Serial(COM3, 9600) # 9600为波特率&#xff0c;根据实际情况进行调整# 初始化数据 lis [random.randint(15, 35) for _ in range(50)]def update_data…

golang 引入swagger(iris、gin)

golang 引入swagger&#xff08;iris、gin&#xff09; 在开发过程中&#xff0c;我们不免需要调试我们的接口&#xff0c;但是有些接口测试工具无法根据我们的接口变化而动态变化。文档和代码是分离的。总是出现文档和代码不同步的情况。这个时候就可以在我们项目中引入swagge…