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

Css3重点知识讲解

news 来源：原创 2025/9/16 9:36:21

选择器

优先级： id 选择器 > 类选择器 > 标签选择器

类选择器：

.myClass {color: blue;
}

`id` 选择器（全局唯一）：

#myId {color: green;
}

标签选择器：

p {color: red;
}

层次选择器：

/* 后代选择器 A B */
.nav a {color: blue;
}/* 子选择器 A > B */
.card > h2 {color: red;
}/* 相邻兄弟选择器 A + B（相邻向下） */
h1 + p {font-size: 20px;
}/* 通用兄弟选择器 A ~ B（向下所有兄弟元素） */
h1 ~ p {color: gray;
}

伪类选择器：

伪类选择器	作用
`:hover`	鼠标悬停时触发
`:focus`	元素获得焦点时触发（如 `input`）
`:first-child`	选择父元素的第一个子元素
`:last-child`	选择父元素的最后一个子元素
`:nth-child(n)`	选择第 `n` 个子元素
`:nth-of-type(n)`	选择第 `n` 个特定类型的子元素
`:checked`	选择被选中的单选框/复选框
`:disabled`	选择禁用的表单元素

属性选择器：

选择器	作用	示例
`[attr]`	选择包含某个属性的元素	`input[required]`
`[attr=value]`	选择属性值等于某个值的元素	`input[type="text"]`
`[attr~=value]`	选择属性值中包含某个单词的元素	`[class~="btn"]`
`[attr^=value]`	选择属性值以某个字符串开头的元素	`a[href^="https"]`
`[attr$=value]`	选择属性值以某个字符串结尾的元素	`a[href$=".pdf"]`
`[attr*=value]`	选择属性值中包含某个字符串的元素	`input[name*="user"]`

示例：

/* 选中所有 target="_blank" 的链接 */
a[target="_blank"] {color: red;
}

/* 选中所有 href 以 https 开头的安全链接 */
a[href^="https"] {color: green;
}

CSS 的引入方式（优先级：就近原则）

内联样式（行内样式）：

<p style="color: red; font-size: 16px;">天津科技大学</p>

内部样式表：

<!DOCTYPE html>
<html>
<head><style>p {color: blue;font-size: 18px;}</style>
</head>
<body><p>天津科技大学</p>
</body>
</html>

外部样式表：

<!DOCTYPE html>
<html>
<head><link href="styles.css" rel="stylesheet">
</head>
<body><p>what are you doing.</p>
</body>
</html>

styles.css 内容：

p {color: green;font-size: 20px;
}

盒子模型

组成：

content（内容区域） - 盒子的实际内容，如文本、图片等。
padding（内边距） - 内容与边框之间的间距，影响背景颜色的填充范围。
border（边框） - 围绕内容和内边距的边界线，可设置颜色、样式和宽度。
margin（外边距） - 盒子与相邻元素之间的间距，不影响背景颜色。

结构示意图：

+-------------------------------+
|           margin              |  外边距
|  +-------------------------+  |
|  |        border           |  |  边框
|  |  +-------------------+  |  |
|  |  |    padding        |  |  |  内边距
|  |  |  +-----------+    |  |  |
|  |  |  | content   |    |  |  |  内容
|  |  |  +-----------+    |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

属性	作用	示例
`width`	盒子内容区域（content）的宽度	`width: 200px;`
`height`	盒子内容区域（content）的高度	`height: 100px;`
`padding`	内边距（content 到 border）	`padding: 10px;`
`border`	边框（border）	`border: 2px solid black;`
`margin`	外边距（margin）	`margin: 20px;`

HTML 嵌套规范注意点：

块级元素 可嵌套文本、块级元素、行内元素，但 p 标签中不能嵌套 div、p、h 等块级元素。
a 标签 内部可以嵌套任意元素，但不能嵌套 a 标签。

Css3重点知识讲解

选择器优先级： id 选择器 > 类选择器 > 标签选择器类选择器： .myClass {color: blue; }id 选择器（全局唯一）： #myId {color: green; }标签选择器： p {color: red; }层次选择器： /…...

编程日记 2025/9/16 9:36:21

[Web 安全] Web 安全攻防 - 学习手册

关联专栏：[内网安全] 内网渗透 - 学习手册-CSDN博客 0x01：Web 安全攻防 —— 信息收集篇 Web 信息收集 — 手动收集域名信息 Web 信息收集 — 手动收集 IP 信息 Web 信息收集 — 端口服务信息收集 Web 信息收集 — 自动化信息收集 — ShuiZe 水泽 We…...

编程日记 2025/9/16 9:31:45

1. 格式化时间：使用date-fns库 npm install date-fns 在组建中创建date.js import { parseISO, format } from date-fnsexport default function Date({ dateString }) {const date parseISO(dateString)return <time dateTime{dateString}>{format(date,…...

编程日记 2025/9/15 22:14:39

故障诊断 | PID搜索算法优化CatBoost故障诊断（MatlabPython）

目录效果一览文章概述故障诊断 | PID搜索算法优化CatBoost故障诊断（Matlab&Python）PID搜索算法优化CatBoost故障诊断PID搜索算法优化CatBoost故障诊断一、引言1.1、研究背景与意义1.2、研究现状1.3、研究目的与内容二、CatBoost算法概述2.1、CatBoost算法原理2.2、CatBo…...

编程日记 2025/9/16 9:34:05

探索关键领域的AI工具：机器学习、深度学习、计算机视觉与自然语言处理

引言在人工智能(AI)迅猛发展的今天，机器学习(ML)、深度学习(DL)、计算机视觉(CV)和自然语言处理(NLP)已经成为解决复杂问题的关键技术。无论是自动驾驶车辆的视觉识别，还是智能助手的对话理解，这些技术都在改变着世界。本文将介绍在各个领域…...

编程日记 2025/9/16 9:34:06

使用 DeepSeek 生成流程图、甘特图与思维导图：结合 Typora 和 XMind 的高效工作流

在现代工作与学习中，可视化工具如流程图、甘特图和思维导图能够极大地提升信息整理与表达的效率。本文将详细介绍如何使用 DeepSeek 生成 Mermaid 文本，结合 Typora 快速生成流程图和甘特图，并通过 Markdown 格式生成思维导图，最终…...

编程日记 2025/9/16 9:34:05

11、集合框架

一、简介 Java集合框架位于java.util包中 Collection是Set和List的父类，Collections是工具类，提供了对集合进行排序、遍历等多种算法的实现。 ArrayList: 有序(放进去顺序和拿出来顺序一致)，可重复 HashSet: 无序(放进去顺序和拿出来顺序不…...

编程日记 2025/9/15 21:46:15

从入门到精通Rust：资源库整理

今天给大家分享一些优质的Rust语言学习资源，适合不同水平的学习者。前三个官方资源是我Rust语言的启蒙老师，非常平易近人。官方资源 The Rust Programming Language (The Book) 链接: https://doc.rust-lang.org/book/ 简介: 官方权威指南&#xff0c…...

编程日记 2025/9/16 9:33:24

Spring Boot 项目启动命令大全：参数详解与高阶用法

Spring Boot 项目启动命令大全：参数详解与高阶用法一、基础启动命令默认启动命令 java -jar xxx.jar适用场景：开发环境快速启动，使用默认配置（端口 8080，内存由 JVM 自动分配）。指定 JVM 内存参数 java…...

编程日记 2025/9/16 9:33:26

c++day4

作业 #include <iostream> #include <cstring> #include <cstdlib> #include <unistd.h> #include <sstream> #include <vector> #include <memory>using namespace std; class S{ private:int a;int b; public:S(i…...

编程日记 2025/9/16 9:34:07

应对LLM应用中的AI幻觉，如何通过Token对数概率预测LLM的可靠性

应对LLM应用中的AI幻觉如何通过Token对数概率预测LLM的可靠性内容： 1. 相关机器学习（ML）概念回顾（精准度/召回率，LLM直觉） 2. 使用序列对数概率度量作为LLM信心 3. 通过案例研究结果过滤低质量LLM输出…...

编程日记 2025/9/16 1:16:51

Openwrt路由器操作系统

一、什么是 OpenWrt？ OpenWrt 是一个基于 Linux 的开源操作系统，主要设计用于嵌入式设备，尤其是路由器。与其说是传统的路由器固件，不如说它是一个路由器操作系统。传统的路由器固件通常由路由器厂商开发，功能相对固…...

编程日记 2025/9/11 14:26:33

基于SpringBoot的“流浪动物救助系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“流浪动物救助系统”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统功能结构图局部E-R图系统首页界面系统…...

编程日记 2025/9/11 1:26:07

Ansible 学习笔记

这里写自定义目录标题基本架构文件结构安装查看版本 Ansible 配置相关文件主机清单写法基本架构 Ansible 是基于Python实现的，默认使用22端口， 文件结构安装查看用什么语言写的用一下命令查看版本 Ansible 配置相关文件主机清单写法...

编程日记 2025/9/16 5:09:53

(六)趣学设计模式之代理模式！

目录一、啥是代理模式？二、为什么要用代理模式？三、代理模式的实现方式1. 静态代理2. JDK动态代理3. CGLIB动态代理四、三种代理的对比五、代理模式的优缺点六、代理模式的应用场景七、总结 🌟我的其他文章也讲解的比较有趣😁&a…...

编程日记 2025/9/14 10:01:24

【CSS】HTML元素布局基础总结

HTML默认布局和元素显示 CSS 元素显示 { HTML 默认布局： 流式布局 { 从左到右，从上到下随页面宽度变化动态排列元素文档流：整个 H T M L 文档的流式布局 HTML 元素分为 { 块级元素 ：默认占满一行行内元素 ：在行内最…...

编程日记 2025/9/10 9:55:55

【JavaScript】什么是JavaScript？以及常见的概念

作为 JavaScript 初学者，想要更好地理解这门语言，需要从核心概念、实践练习和项目实战三个方面入手。下面是详细的学习路线和方法，帮助你系统性地掌握 JavaScript。一、理解 JavaScript 的核心概念 JavaScript 是一门动态、弱类型的编程语言…...

编程日记 2025/9/10 7:03:47

为什么要将PDF转换为CSV？CSV是Excel吗？

在企业和数据管理的日常工作中，PDF文件和CSV文件承担着各自的任务。PDF通常用于传输和展示静态的文档，而CSV因其简洁、易操作的特性，广泛应用于数据存储和交换。如果需要从PDF中提取、分析或处理数据，转换为CSV格式可能是一个高效…...

编程日记 2025/9/14 1:10:30

P1038 [NOIP 2003 提高组] 神经网络

题目描述在兰兰的模型中，神经网络就是一张有向图，图中的节点称为神经元，而且两个神经元之间至多有一条边相连，下图是一个神经元的例子： 神经元（编号为 i） 图中，X1∼X3 是信息…...

编程日记 2025/9/15 1:56:22

TypeScript 类型断言的适用场景及代码示例

类型断言的适用场景及代码示例适用场景类型断言就像是你很确定某个东西是什么，然后直接告诉 TypeScript 编译器“相信我，它就是这个类型”。以下是几种常见的适用场景： 从 any 类型恢复具体类型：当你使用 any 类型时&#xf…...

编程日记 2025/9/13 13:34:45

Docker 容器

Docker 是一种开源的容器化平台，可以让开发人员将应用程序及其依赖项打包到一个可移植的容器中，然后部署到任何支持 Docker 的环境中。Docker 的基本概念包括以下几点： 1. **容器(Container)**：容器是一个独立、轻量级的运行环境…...

编程日记 2025/9/11 4:00:34

Spark（3）vi的基本使用

一.打开与创建文件二.三种模式三. 光标操作四.复制粘贴一.打开与创建文件它是linux的内置命令，所以还是以命令的方式来运行。命令的格式是：Vi /路径/文件名。要注意如下两种情况： 1.如果这个文件不存在，此时就是新建文…...

编程日记 2025/9/14 17:20:44

element-ui的组件使用

1. 安装 Element UI（在文件夹最上面输入cmd进入dos窗口，然后输入安装指令 npm install element-ui --save） 2.在main.js文件全局引入(main.js文件负责全局注册 )，在该文件注册的所有组件在其他文件都能直接调用，一般…...

编程日记 2025/9/12 3:12:41

Starlink卫星动力学系统仿真建模第九讲-滑模（SMC）控制算法原理简介及卫星控制应用

滑模控制（Sliding Mode Control）算法详解一、基本原理滑模控制（Sliding Mode Control, SMC）是一种变结构控制方法，通过设计一个滑模面（Sliding Surface），迫使系统状态在有限时间内…...

编程日记 2025/9/9 17:09:49

《深度剖析Linux 系统 Shell 核心用法与原理_666》

1. 管道符的用法查找当前目录下所有txt文件并统计行数 # 使用管道符将ls命令的结果传递给wc命令进行行数统计 ls *.txt | wc -l 在/etc目录下查找包含"network"的文件并统计数量 # 使用find命令查找文件，并通过grep查找包含特定字符串的文件&#xf…...

编程日记 2025/9/10 19:57:12

51单片机学习之旅——定时器

打开软件 1与其它等于其它，0与其它等于0 1或其它等于1，0或其它等于其它 TMODTMOD&0xF0;//0xF01111 0000进行与操作，高四位保持，低四位清零，高四位定时器1，低四位定时器0 TMODTMOD|0x01;//0x010000 0…...

编程日记 2025/9/8 18:52:00

超详细介绍map（multimap）的使用

map类的介绍 map的声明如下，Key是map底层关键字的类型，T是map底层value的类型。set默认要求Key支持小于比较，如果不支持或者需要的情况下我们可以自行传入仿函数，map底层存储数据的内存是从空间申请来的。一般情况下，我…...

编程日记 2025/9/11 13:08:42

原生稀疏注意力NSA 替换transformer 注意力进行文本生成训练

DeepSeek-R1这篇文章，聚焦范围更加小，R1的重点在于提出了一个文本生成的训练策略和蒸馏策略，这篇文章则是提出了一个注意力机制NSA，主要解决的是长序列做注意力时带来的效率问题。通篇文章看下来，它的实际意义可能比较…...

编程日记 2025/9/16 9:03:50

读书笔记：《百年孤独》

《百年孤独》加西亚.马尔克斯著范晔译读出了阅读障碍。记不得书中的人，记不得书中的事，更不知何为孤独，只记得马孔多，这个陌生的地方，还有那个猪尾巴婴儿。百年：故事跨越了百年孤独&#…...

编程日记 2025/9/16 5:09:55

TVS管学习记录

文章目录前言一、TVS是什么？二、TVS关键参数1.反向截至电压**实际意义** 2.钳位电压**定义与作用****选择依据** **4. 实际应用示例****场景：通信端口的ESD保护** 3.反向截至电压和钳位电压的关联和区别**. 小结** 三、实际应用电路举例总结前言 TVS管…...

编程日记 2025/9/11 22:01:53

网络安全系统概述网络安全系统分为几级

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快 5级网络信息系统安全等级保护分为五级，一级防护水平最低，最高等保为五级。分别是用户自主保护级、系统审计保护级、安全标记保护级、结构…...

编程日记 2025/9/14 20:24:21

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面博文内容涉及基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 😃,生活加油我站在人潮中央，思考这日日重复的生活。我突然想&#xff0c…...

编程日记 2025/9/14 21:51:53

Apache Flink架构深度解析：任务调度、算子数据同步与TaskSlot资源管理机制

Apache Flink是一个分布式流处理框架，其核心架构设计围绕有界与无界数据流的统一处理能力展开。以下从任务分配、算子数据同步、TaskManager与JobManager的TaskSlot机制三个维度展开详细分析： 一、任务分配机制 Flink的任务分配基于并行度（P…...

编程日记 2025/9/14 9:51:21

Linux 常见命令全解析

一、文件操作命令 1. ls ls是列出目录内容的命令。简单输入ls，会展示当前目录下的文件和目录列表。想要获取更详细的信息，比如文件权限、所有者、大小、修改时间等，使用ls -l。若要显示所有文件，包括以点（.&#xff…...

编程日记 2025/9/14 11:51:49

k8s集群部署

集群结构角色IPmaster192.168.35.135node1192.168.35.136node2192.168.35.137 部署 #需在三台主机上操作 //关闭防火墙 [rootmaster ~]# systemctl disable --now firewalld//关闭selinux [rootmaster ~]# sed -i s/enforcing/disabled/ /etc/selinux/config//关闭swap分区…...

编程日记 2025/9/14 18:01:48

springboot005学生心理咨询评估系统(源码+数据库+文档)

源码地址：学生心理咨询评估系统文章目录 1.项目简介2.部分数据库结构与测试用例3.系统功能结构4.包含的文件列表（含论文）后台运行截图 1.项目简介使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信赖了，把现…...

编程日记 2025/9/11 22:54:11

LeetCode37

LeetCode37 目录题目描述示例思路分析代码段代码逐行讲解复杂度分析总结的知识点整合总结...

编程日记 2025/8/16 11:11:18

2025年02月24日Github流行趋势

项目名称：mastra 项目地址url：https://github.com/mastra-ai/mastra 项目语言：TypeScript 历史star数：5735 今日star数：1140 项目维护者：adeleke5140, abhiaiyer91, TheIsrael1, adeniyii, Joshuafolorunsh…...

编程日记 2025/9/13 4:01:36

Spring Boot 中的日志管理

一、日志框架选择 1. 主流框架对比框架特点Spring Boot 默认支持Logback- 性能优异，Spring Boot 默认集成- 支持自动热更新配置文件✅ (默认)Log4j2- 异步日志性能更强- 支持插件扩展- 防范漏洞能力更好❌ (需手动配置)JUL (JDK自带)- 无需额外依赖- 功能简单&am…...

编程日记 2025/9/14 22:27:28

后端之JPA（EntityGraph+JsonView）

不同表之间的级联操作或者说关联查询是很多业务场景都会用到的。对于这种需求最朴素的方法自然是手动写关联表，然后对被关联的表也是手动插入数据。但是手写容易最后写成一堆shit代码，而且修改起来也是非常麻烦的。学会使用现成的工具还是非常有利的…...

编程日记 2025/9/15 22:21:15

点击修改按钮图片显示有问题

问题可能出在表单数据的初始化上。在 ave-form.vue 中，我们需要处理一下从后端返回的图片数据，因为它们可能是 JSON 字符串格式。 vue:src/views/tools/fake-strategy/components/ave-form.vue// ... existing code ...Watch(value)watchValue(v: any) …...

编程日记 2025/9/15 5:03:47

Linux第一个小程序－进度条 (linux第七课)

目录知识补充: 随机数的使用,先用srand(time(NULL))种时间种子函数指针模拟进度条代码知识补充: \r只是回车 \r\n是回车加换行,其中\n带有强制换行的功能如果只使用\r ,还需要刷新缓冲区(fflush(stdout)) %2d是左对齐 %-2d是右对齐 %.1lf是小数点后保留一位随机数的使…...

编程日记 2025/9/15 10:33:29

iOS指纹归因详解

iOS 指纹归因（Fingerprint Attribution）详解 1. 指纹归因的概念指纹归因（Fingerprint Attribution）是一种无 ID 归因（ID-less Attribution）技术，主要用于广告跟踪、用户识别或流量分析。它基…...

编程日记 2025/9/15 20:09:12

【Erdas实验教程】009：非监督分类及分类后评价

文章目录一、分类过程二、分类评价ERDAS 的 ISODATA 算法是基于最小光谱距离来进行的非监督分类，聚类过程始于任意聚类平均值或一个已有分类模板的平均值；聚类每重复一次，聚类的平均值就更新一次，新聚类的均值再用于下次聚类循环。这个过程不断重复，直到最大的循环次数已…...

编程日记 2025/9/10 22:29:46

DeepSeek＋Kimi生成高质量PPT

DeepSeek与Kimi生成PPT全流程解析一、工具分工原理 DeepSeek核心作用：生成结构化PPT大纲（擅长逻辑构建与内容优化）Kimi核心作用：将文本转换为视觉化PPT（提供模板库与排版引擎） 二、操作步骤详解 1. 通…...

编程日记 2025/9/10 0:26:04

conda 基本命令

1、查询当前所有的环境 conda env list 2、创建虚拟环境 conda create -n 环境名 [pythonpython版本号] 其中[pythonpython版本号]可以不写 conda create -n test python3.12 我们输入conda env list看到我们的环境创建成功了，但是发现他是创建在我们默认的C盘的…...

编程日记 2025/9/14 6:00:04