CSS3的新盒子,选择器等

news2025/2/4 11:05:28

新增的选择器:

属性选择器:

结构伪类选择选器:

nth较为重要:但公式中的字母必须是n

区别:

nth-child:

认为父类下的都是儿子,此时就需要有对应的需要,如下,此时即使排1,但是1是p而选择器是div使得结果不能够将结果表达,就不会生效为红色。

nth-of-type:

会指定排序,即他是先看的标签元素,在执行后面的。

伪元素选择器:

伪元素也是相当于盒子的。也是拥有很多属性的,但是一定要有conten:属性才可以有效果

文档树,指的是,在网页检索时,看不到,只在代码层才有。

element时父类盒子

伪元素选择器的使用情景:

作为字体图标:

实质是,将字体图标放进去而已。


视频底层的播放界面的变阴黑的效果的盒子替代:

显示伪类的格式。


清除浮动效果:

单清:

双清:


CSS3新增的盒子模型计算方式:

以前是内容不会变化,但是由于边框的改变使得盒子的大小有所改变。

即标准盒子模型,和IE盒子模型:

CSS3的其他特性:

将图片等实现模糊(虚化)的效果等(CSS3filter滤镜):

是作为一个CSS的修饰属性来进行的。

计算盒子宽度的calc函数:

100%指是父类的100-30px像素。特点在于子类可以依据父类的变化而实现对应效果的变化。

CSS3属性之过渡:

即:不通过js交互就可以实现互动的效果

使用格式:

曲线和开始可以省略:进行为默认的格式。

这时:当鼠标经过的时候就会,慢慢变化为宽度就会变400px

但是如果需要对盒子进行多种同时的变化效果,则需要在同一个transition中进行书写,需要使用,来将多个变化隔开。

这里的all指的是对应 悬停效果中的那个。


进度条的使用: 将内盒子变为过度性。


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DataFunSummit:2023年数据科学在线峰会:核心内容与学习收获(附大会核心PPT下载)

随着大数据时代的来临,数据科学已经在全球范围内成为了一门炙手可热的前沿学科。 数据会说谎?如何正确的挖掘并使用数据?前沿的科学实验如何做?实验又是如何欺骗你的?数据中台如何发挥功效?用户增长有捷径…

win10重装Ubuntu22.04安装报错复盘

目录 一:补充启动盘制作 二:错误信息[0xC0030570] The file or directory is corrupted and unreadable. 三:ubuntu重装步骤: 四:磁盘冗余阵列 五:尝试将SCS11(2,0.0), 第1分区(sda)设备的一个vfat文…

仰暮计划|“从米票、肉票、糖果票到肥皂票、煤票、棉花票等,生活里头的方方面面都能用粮票买到”

口述人:牛翠英(女) 整理人:霍芝冉 口述人基本信息:现68岁,河南省安阳市北关区霍家村人,现居河南安阳市区。 奶奶一生辛劳,操持家务;亲眼见证了时代变迁,社会发展,…

【FPGA】高云FPGA之IP核的使用->PLL锁相环

FPGA开发流程 1、设计定义2、设计输入3、分析和综合4、功能仿真5、布局布线6、时序仿真7、IO分配以及配置文件(bit流文件)的生成8、配置(烧录)FPGA9、在线调试 1、设计定义 使用高云内置IP核实现多路不同时钟输出 输入时钟50M由晶…

2024年美赛C题:Momentum in Tennis思路解析

Problem C: Momentum in Tennis 网球运动中的动力 【扫描下方二维码加入群聊,了解更多思路~】 中文题目: 在2023年温布尔登男子单打决赛中,20岁的西班牙新星卡洛斯阿尔卡拉斯击败了36岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来在温布…

大数据StarRocks(九):资源隔离实战

前言 自 2.2 版本起,StarRocks 支持资源组管理,集群可以通过设置资源组(Resource Group)的方式限制查询对资源的消耗,实现多租户之间的资源隔离与合理利用。在 2.3 版本中,StarRocks 支持限制大查询&#…

如何使用 Supabase Auth 在您的应用程序中设置身份验证

在本文中,您将学习基本的关键概念,这些概念将帮助您掌握身份验证和授权的工作原理。 您将首先了解什么是身份验证和授权,然后了解如何使用 Supabase auth 在应用程序中实现身份验证。 (本文内容参考:java567.com&…

2020年CSP-J认证 CCF非专业级别软件能力认证第一轮真题--完善程序题

2020 CCF认证第一轮(CSP-J)真题 三、完善程序题 第一题 质因数分解 给出正整数n,请输出将n质因数分解的结果,结果从小 到大输出。 例如:输入n120程序应该输出2 2 2 3 5,表示1202 X 2 X 2 X 3 X 5输入保2≤n≤10^9提…

PostGIS空间数据库之空间数据融合实践

目录 前言 一、ST_Union()简介 1、方法说明 2、参数介绍 二、ST_Collect()简介 1、方法说明 2、参数介绍 3、两者区别 三、实际案例实践 1、不重叠融合 2、空间重叠融合 总结 前言 众所周知,熟悉GIS桌面软件的同学一定都知道,想要对空…

跟着pink老师前端入门教程-day13

品优购案例 一、品优购项目规划 1. 品优购项目整体介绍 项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成 PC 端首页、列表页、注册页面的制作 2. 品优购项目学习目的 1. 电商类网站比较综合,里面需要大量的布…

【Linux C | I/O模型】Unix / Linux系统的5种IO模型 | 图文详解

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

oracle 19c上安装样例数据库

样例schema的分类 HR: Human Resources OE: Order Entry PM: Product Media IX: Information Exchange SH: Sales History BI: Business Intelligence 安装样例数据库 1:HR的安装,通过dbca时候 2:HR的安装,安装完数据库后&#…

面试经典 150 题 -- 矩阵 (总结)

总的链接 : 面试经典 150 题 - 学习计划 - 力扣(LeetCode)全球极客挚爱的技术成长平台 36 . 有效的数独 模拟 : 用数组模拟哈希表来判断对应的行,列和当前元素所在的3*3方格中是否重复出现,是的话,直接return false…

vue3前端开发,element-plus前端框架探秘:scope对象

vue3前端开发,element-plus前端框架探秘:scope对象!我们经常需要对当前行的数据进行操作,比如增加,删除,编辑等,为此我们需要传递当前行所对应的唯一主键,通常情况下,当前行对应的业务主键是id属…

花瓣网美女图片爬取

爬虫基础案例01 花瓣网美女图片 网站url:https://huaban.com 图片爬取 import requests import json import os res requests.get(url "https://api.huaban.com/search/file?text%E7%BE%8E%E5%A5%B3&sortall&limit40&page1&positionsear…

【Linux-crontab】Linux 系统 crontab 执行定时任务

【Linux-crontab】Linux 系统 crontab 执行定时任务 1)crontab简介2)操作步骤3)知识扩展4)常见的分时任务格式 1)crontab简介 crond 是 Linux 下用来周期性的执行某种任务或等待处理某些事件的一个守护进程&#xff0…

专有D区震撼上市,高性价比的稀缺大机型谁不爱?

有时候,你可能想要一台或数台大机器: 核数多点,100不算多吧 内存大点,2T、4T的 主频高点,3.5GHz 要么三合一,既要又要还要? 那么问题来了: 这些既多核心,又大内存&a…

初学者必会的100个Python编程代码,入门全套资料都给朋友们整理好了,文末免费领!

我记得刚开始接触编程的时候,觉得太难了。 也很好奇,写代码的那些人也太厉害了吧?全是英文的,他们的英文水平一定很好吧? 他们是怎么记住这么多代码格式的?而且错了一个标点符号,整个程序都会…

Unity SRP 管线【第七讲:URP LOD实现以及Reflections反射探针】

目录 一、URP LOD 组件1、LOD Group的使用2、LOD切换原理Cross Fade(淡入淡出)模式Animated Cross-Fading如果未设置Clip,并且Fade Transition Width不为0LOD物体烘培 SpeedTree 模式 二、反射探针1. 获取反射探针数据2. 环境光照明 IBL3. 反射探针(Refl…

创业公司的项目经理,如何有效争取股权激励

摘要:PM圆桌派,思考要快,行动要快。希赛聚集了一群有追求的PM校友,在一起谈天说地。在这里,我们无问对错,不论输赢,不分高下,每周四,一期一个话题battle,将真…