灯塔：CSS笔记（2）
一 选择器进阶
后代选择器：空格
作用：根据HTML标签的嵌套关系，，选择父元素 后代中满足条件的元素
选择器语法：选择器1 选择器2{ css }
结果：
*在选择器1所找到标签的后代（儿子 孙子 重孙子...）中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子 孙子 重孙子....
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>div p{color: red;}/* div{color: chartreuse;} */</style>
</head>
<body><div><p>这是一个div标签</p></div><div>看看我变红了吗</div>
</body>
</html>子代选择器： >
作用：根据HTML标签的嵌套关系，选择父元素 子代中满足条件的元素
选择器语法：选择器1>选择器2{ css }
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签样式，设置样式
注意点：
1.子代只包括儿子
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>div>a{color: brown;}</style>
</head>
<body><div><p><a href="#">我是超链接</a></p><a href="#">我是超链接2</a></div><a href="#">我是超链接3</a>
</body>
</html>并集选择器： ，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2{ css }
结果：找到 选择器1和选择器2选中的标签，设置样式
注意点：
1.并集选择器中的每组选择器之间通过分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<!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>p,div,span,a{font-family: 楷体;color: rgb(255, 0, 0);}</style>
</head>
<body><p>我是p标签</p><div>我是div标签</div><span>我是span标签</span><br><a href="#">我是超链接</a><h1>现在需要把上面的四个改色和字体</h1>
</body>
</html>交集选择器：紧挨着
作用：选择器1 . 选择器2{css}
结果：（既又原则）找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
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>div.class{color: brown;}</style>
</head>
<body><p>This is a p </p><div class="class">这里有一个div标签</div><p class="class">这里是一个p标签</p>
</body>
</html>hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器 ：hover{ css }
注意点：伪类选择器选中的元素的某种状态
<!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:hover{color: green;}a:hover{color: brown;}p:hover{color: rgb(99, 30, 210);}</style>
</head>
<body><p>鼠标悬停时 文字显示为绿色</p><div>上面是一个p标签</div><a href="#">超链接</a>
</body>
</html>emment语法
作用：通过简单语法，快速生成代码
语法：类似于刚刚学的选择器的写法
| 记忆 | 示例 | 效果 |
| 标签名 | div | <div> <div> |
| 类选择器 | .red | <div class=" red "> <div> |
| id选择器 | #one | <div id="one"> <div> |
| 交集选择器 | p.red#one | <p class="red" id="one"> <p> |
| 子代选择器 | ul>li | <ul><li> </li></ul> |
| 内部文本 | ul>li(我是li的内容) | <ul><li>我是li的内容</li></ul> |
| 创建多个 | ul>li*3 | <ul><li> </li><li> </li><li> </li><ul> |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- p.box --><p class="box"></p><!-- p.red#one --><p class="red" id="one"></p><!-- 同级的div和p ： div+p --><p></p><div></div><!-- 父子：> --><div><p></p></div><!-- ul>li*3 --><ul><li></li><li></li><li></li></ul><!-- ul>li*3{$} --><ul><li>1</li><li>2</li><li>3</li></ul><!-- ul>li{1111}*3 --><ul><li>1111</li><li>1111</li><li>1111</li></ul>
</body>
</html>背景相关属性
背景颜色
属性名：background-color（bgc）
属性值：颜色取值：关键字 rgb表示法 rgba表示法 十六进制...
注意点：背景颜色默认值使透明：rgba（0，0，0，0） transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布居中会习惯给盒子设置背景颜色
背景图片：
属性名：background-image（bgi）
属性值：
background-image：url（'图片的路径'）；注意点:
背景图中url中可以省略引号
背景图片默认仅仅是在水平和垂直方向上平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不是能撑开盒子的
<!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: 200px;height: 300px;background-color: pink;background-image: url(./beauty.jpg);}</style>
</head>
<body><div>整个背景吧</div>
</body>
</html>背景平铺
属性名：background-repeat（bgr）
属性值：
| 取值 | 效果 |
| repeat | （默认）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
<!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: 200px;height: 300px;background-color: red;background-image: url(./beauty.jpg);background-repeat: no-repeat;/* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-repeat: repeat; */}</style>
</head>
<body><div>load</div>
</body>
</html>背景位置
属性名：background-position（bgp）
属性值：
background-position：水平方向位置 垂直方向位置;
注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
<!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: 1900px;height: 1600px;background-color: white;background-repeat:no-repeat ;background-image: url(./bird.jpg); /* background-position: center center; *//* background-position: right bottom; *//* background-position: left top; *//* background-position: center; */background-position: -50px 60px; }</style>
</head>
<body><div>这是背景位置</div>
</body>
</html>背景相关属性的连写形式
属性名：background（bg）
属性值：单个属性的合写，取值之间用空格隔开
书写顺序：
推荐：background：color image repeat position
省略问题：
*可以按需求省略
*特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）
注意点：
*如果需要设置单独的样式和连写 ，要么把单独的样式写在连写的下面 ，要么把单独的样式写在连写的里面
<!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: 2000px;height: 1900px;/* background: pink url(./bird.jpg) no-repeat bottom center; *//* background: pink url(./bird.jpg) no-repeat center bottom; *//* background: pink url(./bird.jpg) no-repeat center bottom; */background: pink url(./bird.jpg) no-repeat 50px 100px;/* 背景图如果是英文单词可以颠倒顺序 *//* 测试背景图位置如果是数值 不要颠倒顺序 */}</style>
</head>
<body><div></div>
</body>
</html>img标签和背景图片的区别
需求：需要在网页中展示一张图的效果？
法一：直接写上img标签即可
法二：div标签+背景图片
*需要设置div的宽高，因为背景图片只是装饰css样式，不能撑开div标签
元素单独显示模式
块级元素
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
div p h系列、ul 、li、dl、dd、form、header、nav、footer...
行内元素
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、em、del...
行内块元素
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select...
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
| 属性 | 效果 | 使用频率 |
| display：block | 转换成块元素 | 较多 |
| display：inline-block | 转换成行内块元素 | 较多 |
| display：inline | 转换成行内元素 | 极少 |
拓展1：HTML嵌套规范注意点：
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等...
但是：p标签中不要求嵌套div、p、h等块级元素
1.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
CSS特性：
1.继承性：
特性：子类元素默认继承父类元素样式的特点(子承父业)
可以继承的常见属性（文字控制属性都可以继承）
1.color
2.font-weight、font-style、font-size、font-family
3.text-indent、text-align
4.line-height
5.。。。
注意点：可以通过调试工具判断样式是否可以继承
<!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{color: blueviolet;font-family: 楷体;}div p a {color:black;}</style>
</head>
<body><div><p><a href="#">超链接</a></p><span>span </span><br><a href="#">a </a><h1>一级标题</h1></div>
</body>
</html>（拓展）继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是如果子类本身就有的属性 ，就不会继续继承
1.a标签的color会继承失效
2.h系类标签的font-sizde会继承失效
<!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>/* 控制文字的属性都能继承，不是控制文字的不能继承 *//*css上一行出错会影响下一行*/div{color: red;font: size 30px;;height: 300px;}</style>
</head>
<body><div>这是div标签<span>这是div里面的span</span></div>
</body>
</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 p{color: red;}.father{color: blue;}</style>
</head>
<body><div class="father"><p class="son"><span>文字</span></p></div>
</body>
</html>2.层叠性：
特性：
1.给同一个标签设置不同的样式→ 此时样式会层叠叠加 →会共同作用在标签上
2.给同一个标签设置相同的样式→ 此时样式会层叠覆盖 →最终写在最后的样式会生效
注意点：当样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果
3.1优先级的介绍：
特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内式<！important
注意点：
1.！important写在属性值的后面，分号的前面！
2.！important不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用！important。
3.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>#box{color: aqua;}.box{color: blue;}div{color: chartreuse!important;}body{color: red;}</style>
</head>
<body><div class="box" id="box" style="color:blueviolet;">测试优先级</div>
</body>
</html>Chrome调试工具
相关文章：
灯塔：CSS笔记（2）
一 选择器进阶 后代选择器：空格 作用：根据HTML标签的嵌套关系，，选择父元素 后代中满足条件的元素 选择器语法：选择器1 选择器2{ css } 结果： *在选择器1所找到标签的后代（儿子 孙子 重孙子…...
基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。
演示视频： 基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。 项目介绍： 采用M（model）V（view）C（controller）三层体系结构…...
保姆级讲解 Stable Diffusion
目录 本文讲解思路介绍 一、引入 二、Diffusion Model 三、原文的摘要和简介 四、Stable Diffusion 4.1、组成模块 4.2、感知压缩 4.3、条件控制 五、图解 Stable Diffusion 5.1、潜在空间的扩散 5.2、条件控制 5.3、采样 5.4、Diffusion Model 与 Stable Diffusion …...
HTML二识
图片，音频，视频标签 标签描述<img>定义图片<audio>定义音频<video>定义视频 定义图片： src：规定显示图片的URL（统一资源定位符）height：定义图像的高度 单位：px…...
[BUUCTF]-PWN:starctf_2019_babyshell解析（汇编\x00开头绕过+shellcode）
查看保护 查看ida 这里就是要输入shellcode，但是函数会有检测。 在shellcode前面构造一个以\x00机器码开头的汇编指令，这样就可以绕过函数检查了。 完整exp： from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…...
uniapp 手写 简易 时间轴 组件
一、案例如图 该案例设计条件： 左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容 2. 样式难点&#…...
实现HttpServletRequest下多次获取流数据
HttpServletRequest下多次获取流数据 背景示例错误的尝试全局替换执行顺序 背景 众所周知request的输入流只能读取一次，不能重复读取。而在HttpServletRequest中，获取请求体数据的流（通过getInputStream()方法）默认只能被读取一…...
uviewplus在uniapp中的配置使用
版本: "uview-plus": "^3.1.45"在page.json中配置: "easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/componen…...
C++11 新特性之future和packaged_task
C11 新特性之future #include <iostream> #include <thread> #include <future> #include <chrono>void test(std::promise<int>& probj){std::this_thread::sleep_for(std::chrono::seconds(5));probj.set_value(20); }int main(){std::pr…...
Flutter APP下载更新
由于我做的项目不是放在APP商店（公司内部用）的，一些flutter的第三方库不合适我，我需要用的是从网上下载再安装（从服务下），网上也找了花了我好几天时间。不全又乱，这我自己做一下备份…...
Pinctrl子系统_04_Pinctrl子系统主要数据结构
引言 本节说明Pinctrl子系统中主要的数据结构，对这些数据结构有所了解，也就是对Pinctrl子系统有所了解了。 前面说过，要使用Pinctrl子系统，就需要去配置设备树。 以内核面向对象的思想，设备树可以分为两部分&#x…...
设计模式(十)：抽象工厂模式（创建型模式）
Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖对 象的接口，而无须指定它们的具体类。 之前写过简单工厂和工厂方法模式(创建型模式)，这两种模式比较简单。 简单工厂模式其实不符合开闭原则，即对修改关闭…...
计算机网络概论01
计算机系统基础知识 基本组成 计算机系统由硬件和软件组成。 硬件由五大部分，他们分别是： 运算器 执行算数运算和逻辑运算控制器 控制cpu的工作，决定了计算机运行过程的自动化。包括指令控制逻辑、时序控制逻辑、总线控制逻辑和中断控制逻辑…...
新零售SaaS架构：订单履约系统架构设计（万字图文总结）
什么是订单履约系统？ 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程。 它连接了上游交易（客户在销售平台下单环）和下游仓储配送（如库存管理、物流配送），确保信息流顺畅、操作协同&…...
Hive SQL 开发指南（三）优化及常见异常
在大数据领域，Hive SQL 是一种常用的查询语言，用于在 Hadoop上进行数据分析和处理。为了确保代码的可读性、维护性和性能，制定一套规范化的 Hive SQL 开发规范至关重要。本文将介绍 Hive SQL 的基础知识，并提供一些规范化的开发指…...
Spring Boot 自动装配的原理！！！
SpringBootApplication SpringBootConfiguration：标识启动类是一个IOC容器的配置类 EnableAutoConfiguration： AutoConfigurationPackage：扫描启动类所在包及子包中所有的组件，生…...
Linux运维_Bash脚本_编译安装Wayland-1.22.0
Linux运维_Bash脚本_编译安装Wayland-1.22.0 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。 您可以在 Linu…...
Python数字类型
文章目录 Python数字类型1. 数字类型1.1 数字类型概述1.2 整数类型1.3 浮点数类型1.4 复数 2. 数字类型的操作2.1 内置的数值运算操作符2.2 内置的数值运算函数2.3 内置的数字类型转换函数 思考与练习 Python数字类型 1. 数字类型 1.1 数字类型概述 数字是自然界计数活动的抽…...
每天一个数据分析题（一百九十六）
在多元线性回归模型的自变量选择方法中，关于向后回归法和逐步回归法的描述，以下哪些是正确的？ A. 向后回归法开始时包含所有自变量，并逐步剔除每个不显著的变量。 B. 逐步回归法结合了向前回归法和向后回归法，可以在…...
华为北向网管NCE开发教程（1）闭坑选接口协议
华为北向网管NCE开发教程（1）闭坑选接口协议 华为北向网管NCE开发教程（2）REST接口开发 华为北向网管NCE开发教程（3）CORBA协议开发 本文一是记录自己开发华为北向网管遇到的坑，二是给需要的人&…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...