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

2. CSS3的新特性

news 2025/12/27 2:19:55

2.1CSS3的现状

●新增的CSS3特性有兼容性问题, ie9+才支持
●移动端支持优于PC端
●不断改进中
●应用相对广泛
●现阶段主要学习: 新增选择器和盒子模型以及其他特性

CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素：
1.属性选择器
2.结构伪类选择器
3.伪元素选择器

2.2属性选择器

属性选择器可以根据元素的特定属性来选择元素。这样就可以不用借助于类或者id选择器。
在这里插入图片描述
第2个重点记忆
注意：类选择器、属性选择器、伪类选择器，权重为10。

【示例代码】

<!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>/* 1. */input[value] {color: pink;}/* 2. */input[type=text] {color: pink;}/* 3. */div[class^=ic] {color: red;}/* 4. */section[class$=data] {color: skyblue;}/* 5. */span[class*=ap] {color: blueviolet;}/* 权重问题  11*/div.ic2 {color: green;}</style>
</head>
<body><!-- 1.利用属性选择器就可以不用借助于类或者id选择器--><!-- <input type="text" value="请输入用户名"><input type="text"> --><!-- 2.属性选择器还可以选择属性=值的某些元素--><input type="text"><input type="password"><!-- 3.属性选择器可以选择属性值开头的某些元素--><div class="ic1">图标1</div><div class="ic2">图标2</div><div class="ic3">图标3</div><div>与我无关</div><!-- 4.属性选择器可以选择属性值结尾的某些元素--><section class="ic1-data">孙尚香</section><section class="ic2-data">小乔</section><section class="ic3-who">爱谁谁</section><!-- 5.属性选择器可以选择属性值有相同的某些元素 --><span class="1ap1">西瓜</span><span class="2ap2">草莓</span><span class="jgb">鸡公煲</span>
</body>
</html>

在这里插入图片描述

2.3结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
在这里插入图片描述
区别:

  1. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子, 然后看是否和E匹配
  2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子

nth-child ( n ) 选择某个父元素的一个或多个特定的子元素(重点)
●n可以是数字, 关键字和公式
●n如果是数字, 就是选择第n个子元素，里面的数字从1开始…
●n可以是关键字：even偶数, odd奇数
●n可以是公式：常见的公式如下(如果n是公式, 则从0开始计算，但是第 0个元素或者超出了元素的个数会被忽略)
在这里插入图片描述
【示例代码】

<!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>/* 1.选出所有偶数 even或2n*/ul li:nth-child(even) {background-color: #ccc;}/* 2.选出所有奇数 odd或2n+1 */ul li:nth-child(2n+1) {background-color: gray;}/* 3.nth-child(n) 这里面必须为n从0开始 每次加1 往后计算*//* 相当于选择了ol 里所有的 li */ol li:nth-child(n) {background-color: skyblue;}</style>
</head>
<body><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li><li>第6个</li></ul><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ol>
</body>
</html>

在这里插入图片描述

小结
●结构伪类选择器一般用于选择父级里面的第n个孩子
●nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子, 然后看是否和E匹配
●nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E, 然后再根据E 找第n个孩子
●关于nth-child (n)我们要知道n是从0开始计算的,要记住常用的公式
●如果是无序列表, 用nth-child更多
●类选择器、属性选择器、伪类选择器, 权重为 10。

2.4伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素, 而不需要HTML标签, 从而简化HTML结构。
注意:
●before和after创建一个元素 ,但是属于行内元素
●新创建的这个元素在文档树中是找不到的, 所以我们称为伪元素
●语法: element::before {}
●before和after必须有content属性
●before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
●伪元素选择器和标签选择器一样, 权重为1

伪元素选择器使用场景1 : 伪元素 字体图标
语法

div: :before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e' ;
font-size: 20px;
}

【示例代码】

<!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>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?eyj54y');src: url('fonts/icomoon.eot?eyj54y#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?eyj54y') format('truetype'),url('fonts/icomoon.woff?eyj54y') format('woff'),url('fonts/icomoon.svg?eyj54y#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid black;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\ea3e';}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

伪元素选择器使用场景2：仿土豆效果

【示例代码】

<!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>.td {position: relative;width: 444px;height: 320px;margin: 30px auto;}.td img {width: 100%;height: 100%;}.td::before {content: '';display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当鼠标经过td盒子就让里面的遮罩层显示出来 */.td:hover::before {display: block;}</style>
</head><body><div class="td"><div class="mask"></div><img src="images/td.png" alt=""></div>
</body></html>

在这里插入图片描述

伪元素选择器使用场景3：伪元素清除浮动

伪元素清除浮动的原理

在这里插入图片描述
在这里插入图片描述

相关文章：

2. CSS3的新特性

2.1CSS3的现状 ●新增的CSS3特性有兼容性问题, ie9才支持 ●移动端支持优于PC端 ●不断改进中 ●应用相对广泛 ●现阶段主要学习: 新增选择器和盒子模型以及其他特性 CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素&#xff1a; 1.属性选择器 2.结构伪类选择器…...

编程日记 2023/7/14 7:06:11

从零开始训练神经网络

用Keras实现一个简单神经网络 Keras&#xff1a; Keras是由纯python编写的基于theano/tensorflow的深度学习框架。 Keras是一个高层神经网络API&#xff0c;支持快速实验&#xff0c;能够把你的idea迅速转换为结果&#xff0c;如果有如下需 求&#xff0c;可以优先选择Keras&a…...

编程日记 2023/7/14 6:32:50

连接区块链节点的 JavaScript 库 web3.js

文章目录 前言web3.js 介绍web3.js安装web3.js库模块介绍连接区块链节点向区块链网络发送数据查询区块链网络数据 前言 通过前面的文章我们可以知道基于区块链开发一个DApp&#xff0c;而DApp结合了智能合约和用户界面&#xff08;客户端&#xff09;&#xff0c;那客户端是如…...

编程日记 2023/7/14 5:59:29

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

目录 1、CSS的scroll-behavior2、Element.scrollTop3、Element.scroll()/Window.scroll()4、Element.scrollBy()/Window.scrollBy()5、Element.scrollTo()/Window.scrollTo()6、Element.scrollIntoView()7、自定义兼容性方案8、参考文章 准备知识&#xff1a; scrollWidth: 是…...

编程日记 2023/7/14 5:26:08

【Docker】Docker的部署含服务和应用、多租环境、Linux内核的详细介绍

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 &#x1f4d5;作者简介&#xff1a;热…...

编程日记 2023/7/14 4:52:46

C国演义 [第五章]

第五章 子集题目理解步骤树形结构递归函数递归结束的条件单层逻辑 代码 子集II题目理解步骤树形结构递归函数递归结束的条件单层逻辑 代码 子集 力扣链接 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。…...

编程日记 2023/7/14 4:19:25

Proxy-Reflect使用详解

1 监听对象的操作 2 Proxy类基本使用 3 Proxy常见捕获器 4 Reflect介绍和作用 5 Reflect的基本使用 6 Reflect的receiver Proxy-监听对象属性的操作(ES5) 通过es5的defineProperty来给对象中的某个参数添加修改和获取时的响应式。 单独设置defineProperty是只能一次设置一…...

编程日记 2023/7/14 3:46:04

【Linux后端服务器开发】Shell外壳——命令行解释器

目录 一、Shell外壳概述 二、描述Shell外壳原理的生动例子 三、C语言模拟实现Shell外壳 一、Shell外壳概述 在狭义上 , 我们称Linux操作系统的内核为 Linux 在广义上 , Linux发行版 Linux内核 外壳程序 就比如市面上现在的redhat, centos, ubuntu等等我们耳熟能详的Linux发…...

编程日记 2023/7/14 3:12:41

【无公网IP】在外Windows远程连接MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 转载自cpolar极点云文章&#xff1a;公网远程…...

编程日记 2023/7/14 2:39:20

mac python3 安装virtualenv

第一步&#xff0c;执行安装virtualenv pip3 install virtualenv 注意&#xff1a;如果出现WARNING: The script virtualenv is installed in ‘/home/local/bin’ which is not on PATH. Consider adding this directory to PATH or, if you prefer to suppress this warning,…...

编程日记 2023/7/14 2:05:59

网络安全（自学笔记）

如果你真的想通过自学的方式入门web安全的话&#xff0c;那建议你看看下面这个学习路线图&#xff0c;具体到每个知识点学多久&#xff0c;怎么学&#xff0c;自学时间共计半年左右&#xff0c;亲测有效&#xff08;文末有惊喜&#xff09;&#xff1a; 1、Web安全相关概念&am…...

编程日记 2023/7/14 1:32:38

SPSS方差分析

参考文章 导入准备好的数据 选择分析方法 选择参数 选择对比&#xff0c;把组别放入因子框中&#xff0c;把红细胞增加数放进因变量列表 勾选“多项式”&#xff0c;等级取默认“线性” &#xff0c;继续 接着点击“事后比较”&#xff0c;弹出对话框&#xff0c;勾选“LSD” …...

编程日记 2023/7/14 0:59:16

【Linux】深入理解文件系统

系列文章 收录于【Linux】文件系统 专栏 关于文件描述符与文件重定向的相关内容可以移步 文件描述符与重定向操作。 可以到 浅谈文件原理与操作 了解文件操作的系统接口。 想深入理解文件缓冲区还可以看看文件缓冲区。 目录 系列文章 磁盘 结构介绍 定位数据 抽象管理…...

编程日记 2023/7/14 0:25:55

12.9 专用指令

目录 状态寄存器传送指令 读CPSR 写CPSR 软中断指令 协处理器指令 协处理器数据运算指令 协处理器存储器访问指令 协处理器寄存器传送指令 伪指令 空指令 LDR 指令 伪指令 状态寄存器传送指令 专门用来读写CPSR寄存器的指令 读CPSR MRS R1,CPSR R1 CPSR 写CP…...

编程日记 2023/7/13 23:52:34

Jvm对象回收算法-JVM（九）

上篇文章介绍了jvm运行时候对象进入老年代的场景&#xff0c;以及如何避免频繁fullGC。 Jvm参数设置-JVM&#xff08;八&#xff09; 老年代分配担保机制 这个机制的目的是为了提升效率&#xff0c;在minorGC之前&#xff0c;会有三次判断&#xff0c;之后再次minorGC速度会…...

编程日记 2023/7/13 23:19:12

SpringCloud Alibaba微服务分布式架构组件演变

文章目录 1、SpringCloud版本对应1.1 技术选型依据1.2 cloud组件演变&#xff1a; 2、Eureka2.1 Eureka Server &#xff1a; 提供服务注册服务2.2 EurekaClient &#xff1a; 通过注册中心进行访问2.3 Eureka自我保护 3、Eureka、Zookeeper、Consul三个注册中心的异同点3.1 CP…...

编程日记 2023/7/13 22:45:51

【Linux】初步理解操作系统和进程概念

一.认识操作系统 操作系统是一款纯正的 “搞管理” 的文件。 那操作系统为什么要管理文件&#xff1f; “管理” 又是什么&#xff1f; 它是怎么管理的&#xff1f; 为什么&#xff1f; 1.操作系统帮助用户&#xff0c;管理好底层的软硬件资源&#xff1b; 2.为了给用户提供一个…...

编程日记 2023/7/13 22:12:30

TypeScript 中的字面量类型和联合类型特性

字面量类型和联合类型是 TypeScript 中常用的类型特性。 1. 字面量类型&#xff1a; 字面量类型是指具体的值作为类型。例如&#xff0c;字符串字面量类型可以通过给定的字符串字面量来限制变量的取值范围。 let status: "success" | "error"; // status…...

编程日记 2023/7/13 21:39:09

react+jest+enzyme配置及编写前端单元测试UT

文章目录 安装及配置enzyme渲染测试技巧一、常见测试二、触发ant design组件三、使用redux组件四、使用路由的组件五、mock接口网络请求六、mock不需要的子组件 安装及配置 安装相关库&#xff1a; 首先&#xff0c;使用npm或yarn安装所需的库。 npm install --save-dev jest…...

编程日记 2023/7/13 21:05:47

自学网络安全（黑客）

一、为什么选择网络安全&#xff1f; 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 未来3-5年&#xff0c;是安全行业的黄金发展期&#xff0c;提前踏入…...

编程日记 2023/7/13 20:32:26

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/12/22 8:58:18

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/12/22 11:37:06

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/12/10 15:22:31

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/12/17 6:15:17

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/12/14 3:26:26

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/12/19 23:33:24

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/12/15 17:15:27

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/12/24 23:58:34