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

灯塔：CSS笔记（2）

news 2026/2/9 22:49:29

一选择器进阶

后代选择器：空格

作用：根据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所找到标签的后代（儿子孙子重孙子…...

编程日记 2024/3/9 13:22:01

基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。

演示视频： 基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。项目介绍： 采用M（model）V（view）C（controller）三层体系结构…...

编程日记 2024/3/9 13:19:59

保姆级讲解 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 …...

编程日记 2024/3/9 13:14:55

HTML二识

图片，音频，视频标签标签描述<img>定义图片<audio>定义音频<video>定义视频定义图片： src：规定显示图片的URL（统一资源定位符）height：定义图像的高度单位：px…...

编程日记 2024/3/9 13:12:53

[BUUCTF]-PWN:starctf_2019_babyshell解析（汇编\x00开头绕过+shellcode）

查看保护查看ida 这里就是要输入shellcode，但是函数会有检测。在shellcode前面构造一个以\x00机器码开头的汇编指令，这样就可以绕过函数检查了。完整exp： from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…...

编程日记 2024/3/9 13:05:46

uniapp 手写简易时间轴组件

一、案例如图该案例设计条件： 左侧时间和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离二、编写逻辑 1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容 2. 样式难点&#…...

编程日记 2024/3/9 13:04:45

实现HttpServletRequest下多次获取流数据

HttpServletRequest下多次获取流数据背景示例错误的尝试全局替换执行顺序背景众所周知request的输入流只能读取一次，不能重复读取。而在HttpServletRequest中，获取请求体数据的流（通过getInputStream()方法）默认只能被读取一…...

编程日记 2024/3/9 13:01:42

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…...

编程日记 2024/3/9 12:59:40

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…...

编程日记 2024/3/9 12:57:39

Flutter APP下载更新

由于我做的项目不是放在APP商店（公司内部用）的，一些flutter的第三方库不合适我，我需要用的是从网上下载再安装（从服务下），网上也找了花了我好几天时间。不全又乱，这我自己做一下备份…...

编程日记 2024/3/9 12:56:38

Pinctrl子系统_04_Pinctrl子系统主要数据结构

引言本节说明Pinctrl子系统中主要的数据结构，对这些数据结构有所了解，也就是对Pinctrl子系统有所了解了。前面说过，要使用Pinctrl子系统，就需要去配置设备树。以内核面向对象的思想，设备树可以分为两部分&#x…...

编程日记 2024/3/9 12:53:35

设计模式(十)：抽象工厂模式（创建型模式）

Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖对象的接口，而无须指定它们的具体类。之前写过简单工厂和工厂方法模式(创建型模式)，这两种模式比较简单。简单工厂模式其实不符合开闭原则，即对修改关闭…...

编程日记 2024/3/9 12:52:34

计算机网络概论01

计算机系统基础知识基本组成计算机系统由硬件和软件组成。硬件由五大部分，他们分别是： 运算器执行算数运算和逻辑运算控制器控制cpu的工作，决定了计算机运行过程的自动化。包括指令控制逻辑、时序控制逻辑、总线控制逻辑和中断控制逻辑…...

编程日记 2024/3/9 12:50:32

新零售SaaS架构：订单履约系统架构设计（万字图文总结）

什么是订单履约系统？ 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程。它连接了上游交易（客户在销售平台下单环）和下游仓储配送（如库存管理、物流配送），确保信息流顺畅、操作协同&…...

编程日记 2024/3/9 12:48:30

Hive SQL 开发指南（三）优化及常见异常

在大数据领域，Hive SQL 是一种常用的查询语言，用于在 Hadoop上进行数据分析和处理。为了确保代码的可读性、维护性和性能，制定一套规范化的 Hive SQL 开发规范至关重要。本文将介绍 Hive SQL 的基础知识，并提供一些规范化的开发指…...

编程日记 2024/3/9 12:44:26

Spring Boot 自动装配的原理！！！

SpringBootApplication SpringBootConfiguration：标识启动类是一个IOC容器的配置类 EnableAutoConfiguration： AutoConfigurationPackage：扫描启动类所在包及子包中所有的组件，生…...

编程日记 2024/3/9 12:43:25

Linux运维_Bash脚本_编译安装Wayland-1.22.0

Linux运维_Bash脚本_编译安装Wayland-1.22.0 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。您可以在 Linu…...

编程日记 2024/3/9 12:41:23

Python数字类型

文章目录 Python数字类型1. 数字类型1.1 数字类型概述1.2 整数类型1.3 浮点数类型1.4 复数 2. 数字类型的操作2.1 内置的数值运算操作符2.2 内置的数值运算函数2.3 内置的数字类型转换函数思考与练习 Python数字类型 1. 数字类型 1.1 数字类型概述数字是自然界计数活动的抽…...

编程日记 2024/3/9 12:39:22

每天一个数据分析题（一百九十六）

在多元线性回归模型的自变量选择方法中，关于向后回归法和逐步回归法的描述，以下哪些是正确的？ A. 向后回归法开始时包含所有自变量，并逐步剔除每个不显著的变量。 B. 逐步回归法结合了向前回归法和向后回归法，可以在…...

编程日记 2024/3/9 12:35:18

华为北向网管NCE开发教程（1）闭坑选接口协议

华为北向网管NCE开发教程（1）闭坑选接口协议华为北向网管NCE开发教程（2）REST接口开发华为北向网管NCE开发教程（3）CORBA协议开发本文一是记录自己开发华为北向网管遇到的坑，二是给需要的人&…...

编程日记 2024/3/9 12:34:17

＜6＞-MySQL表的增删查改

目录一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件三，update（更新表） 四，delete（删除表&#xf…...

编程新知 2025/12/11 18:28:17

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2026/2/4 23:47:47

相机从app启动流程

一、流程框架图二、具体流程分析 1、得到cameralist和对应的静态信息目录如下：重点代码分析：启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19