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

Css3重点知识讲解

article 2026/4/7 17:52:18

选择器

优先级： 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; }层次选择器： /…...

编程日记 2026/3/12 12:16:12

三、《重学设计模式》-单例模式

单例模式单例模式分为四大类，饿汉式、懒汉式、静态内部类、枚举饿汉式优点：类装载时进行实例化，避免同步问题缺点：造成内存浪费实现一 1.构造器私有化 2.内部创建对象实例 3.提供静态方法 public class Type1 {public s…...

编程日记 2026/3/14 12:17:05

SpringBoot3整合Swagger3时出现Type javax.servlet.http.HttpServletRequest not present错误

目录错误详情错误原因解决方法引入依赖修改配置信息创建文件访问错误详情错误原因 SpringBoot3和Swagger3版本不匹配解决方法使用springdoc替代springfox，具体步骤如下： 引入依赖在pom.xml文件中添加如下依赖： <…...

编程日记 2026/3/14 4:06:55

项目实战--网页五子棋（匹配模块）(4)

上期我们完成了游戏大厅的前端部分内容，今天我们实现后端部分内容 1. 维护在线用户在用户登录成功后，我们可以维护好用户的websocket会话，把用户表示为在线状态，方便获取到用户的websocket会话 package org.ting.j20250110_g…...

编程日记 2026/4/5 4:30:17

Python闭包知多少

目录目标 Python版本概述实战基本语法数据隐藏和封装延迟计算回调函数目标熟悉闭包语法结构，通过案例来了解闭包的使用场景。 Python版本 Python 3.9.18 概述闭包（Closure） 闭包是一个函数对象（即内部函数或被…...

编程日记 2025/10/10 4:41:53

【Java毕业设计】商城购物系统（附源码+数据库脚本）

本系统是基于JavaEEServletJSPMysql实现的商城购物系统。包括用户登录、用户注册、商品分类、添加购物车、订单支付等基本功能，具体页面及功能如下： 感谢阅读！ 如需获取完整项目源码及更多项目信息，可添加V：...

编程日记 2026/3/26 0:09:47

css特异性，继承性

html <div class"introduce"><div class"title">介绍</div><div class"card-box"><div class"card"><div class"title">管理</div></div></div> </div> scs…...

编程日记 2025/6/27 5:59:59

POST请求提交数据的三种方式及通过Postman实现

1、什么是POST请求？ POST请求是HTPP协议中一种常用的请求方法，它的使用场景是向客户端向服务器提交数据，比如登录、注册、添加等场景。另一种常用的请求方法是GET，它的使用场景是向服务器获取数据。 2、POST请求提交数据的常见编…...

编程日记 2026/3/21 3:57:36

Spring Boot 整合 Spring MVC /（整合Web）笔记

1. Spring Boot 整合 Web 功能 Spring Boot 通过自动配置简化了 Spring MVC 的集成。只需在 pom.xml 中添加 spring-boot-starter-web 依赖，Spring Boot 就会自动配置 Spring MVC 的相关组件。 <dependency><groupId>org.springframework.boot</gr…...

编程日记 2026/3/26 2:21:30

[特殊字符]清华大学：DeepSeek从入门到精通.pdf（清华领航，驾驭DeepSeek，开启AI新境界）

不愧是清华大学出品的deepseek手册，简直是新手福音，非常实用！ 这份《DeepSeek：从入门到精通》手册从基础到高阶，手把手教你玩转DeepSeek，特别适合刚入门的小白，拿来就能用！ 1.Deep…...

编程日记 2026/3/26 3:39:18

LeetCode 热题100 2. 两数相加

LeetCode 热题100 | 2. 两数相加大家好，今天我们来解决一道经典的算法题——两数相加。这道题在 LeetCode 上被标记为中等难度，要求我们将两个非空的链表表示的整数相加，并以相同形式返回一个表示和的链表。下面我将详细讲解解题思路&#…...

编程日记 2026/3/10 13:35:56

深度学习技术全景图：从基础架构到工业落地的超级进化指南

🔍 目录导航基础架构革命训练优化秘技未来战场前瞻 🧩 一、基础架构革命 1.1 前馈神经网络（FNN） ▍核心结构 import torch.nn as nnclass FNN(nn.Module):def __init__(self):super().__init__()self.fc1 nn.Linear(784, 25…...

编程日记 2026/4/3 4:37:07

PyTorch-基础(CUDA、Dataset、transforms、卷积神经网络、VGG16)

PyTorch-基础环境准备 CUDA Toolkit安装（核显跳过此步骤） CUDA Toolkit是NVIDIA的开发工具，里面提供了各种工具、如编译器、调试器和库首先通过NVIDIA控制面板查看本机显卡驱动对应的CUDA版本，如何去下载对应版本的Toolkit工…...

编程日记 2026/4/7 7:00:00

IO/网络IO基础全览

目录 IO基础CPU与外设1. 程序控制IO（轮询）2. 中断中断相关知识中断分类中断处理过程中断隐指令 3. DMA（Direct Memory Access） 缓冲区用户空间和内核空间IO操作的拷贝概念传统IO操作的4次拷贝减少一个CPU拷贝的mmap内存映射文件(m…...

编程日记 2026/4/3 9:09:58

【DeepSeek-R1背后的技术】系列十一：RAG原理介绍和本地部署（DeepSeekR1+RAGFlow构建个人知识库）

【DeepSeek-R1背后的技术】系列博文： 第1篇：混合专家模型（MoE） 第2篇：大模型知识蒸馏（Knowledge Distillation） 第3篇：强化学习（Reinforcement Learning, RL）…...

编程日记 2026/4/2 22:54:46

鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影）

鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影） 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…...

编程日记 2026/4/3 2:14:23

【数据结构】B树家族详解：B树、B+树、B*

一、B树（B-Tree） 1. 定义 B树是一种平衡多路查找树，自平衡的树，能够保持数据有序，设计目标是为减少磁盘I/O次数。适用于需要频繁读写磁盘的场景（如数据库、文件系统）。 2、B树基本性质节点键值数量限制：对于 m 阶 B 树，根节点至少有 1 个键值，最多有 m - 1 个…...

编程日记 2026/4/2 10:36:53

C语言数据结构—二叉树的链式结构实现

目录 1、建立二叉树 1.1 二叉树的结构 1.2 手动建立二叉树 2、二叉树的遍历 2.1 二叉树的三种遍历方式 2.1.1 前序遍历 2.1.2 中序遍历 2.1.2 后序遍历 3、求二叉树的结点数和二叉树的高度 3.1 求二叉树结点数 3.2 求二叉树叶子结点 3.3 求二叉树第k层结点的个数 …...

编程日记 2026/4/5 12:53:42

Java 大视界 —— Java 大数据在智能零售动态定价策略中的应用实战（98）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2026/3/19 8:44:42

如何实现修改jvm中类的属性开源项目

根据你的需求，以下是一些可以实现类似阿里巴巴 Diamond 功能的框架和工具，这些项目可以帮助你动态推送配置信息，从而实现类似的功能： 1. Nacos Nacos 是一个更现代的动态配置服务，支持配置管理、服务发现和元数据管理…...

编程日记 2025/12/2 18:42:56

危化品经营单位安全管理人员的职责及注意事项

危化品经营单位安全管理人员肩负着保障经营活动安全的重要责任，以下是其主要职责及注意事项： 职责 1. 安全制度建设与执行：负责组织制定本单位安全生产规章制度、操作规程和生产安全事故应急救援预案，确保这些制度符合国家相关法…...

编程日记 2026/4/5 10:06:41

腾讯云大模型知识引擎×DeepSeek赋能文旅

腾讯云大模型知识引擎DeepSeek赋能文旅 ——以合肥文旅为例的技术革新与实践路径一、技术底座：知识引擎与DeepSeek的融合逻辑腾讯云大模型知识引擎与DeepSeek模型的结合，本质上是**“知识库检索增强生成（RAG）实时联网能力”**…...

编程日记 2026/4/2 7:58:10

Day 49 卡玛笔记

这是基于代码随想录的每日打卡 1143. 最长公共子序列给定两个字符串 text1 和 text2，返回这两个字符串的最长公共子序列的长度。如果不存在公共子序列 ，返回 0 。一个字符串的子序列是指这样一个新的字符串：它是由原字符串在不改变…...

编程日记 2026/3/17 7:52:24

WebXR教学 01 基础介绍

什么是WebXR？ 定义 XR VR AR Web上使用XR技术的API WebXR 是一组用于在 Web 浏览器中实现虚拟现实（VR）和增强现实（AR）应用的技术标准。它由 W3C 的 Immersive Web 工作组开发，旨在提供跨设备的沉浸式体验…...

编程日记 2026/4/2 13:51:52

DeepSeek＋Kimi生成高质量PPT

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

编程日记 2026/4/4 0:11:02

hot100---day3

二叉树复习hot100专题 144. 二叉树的前序遍历 - 力扣（LeetCode） 递归法的前中后序遍历，格式比较一致； class Solution { public:vector<int>& traversal(TreeNode* root, vector<int>& ans){if(rootnullpt…...

编程日记 2026/3/3 15:39:12

clickhouse--表引擎的使用

表引擎决定了如何存储表的数据。包括： 数据的存储方式和位置，写到哪里以及从哪里读取数据。(默认是在安装路径下的 data 路径)支持哪些查询以及如何支持。（有些语法只有在特定的引擎下才能用）并发数据访问。索引的使用&#xff0…...

编程日记 2026/3/26 11:32:32

tauri输入js脚本的方法和注意事项initialization_script

注入js脚本最常用的就是initialization_script，通过这个方法注入的js脚本在页面每个页面都会执行，这个在tauri文档也可以搜到：WebviewWindowBuilder in tauri::webview - Rust，但是请注意，这个方法只能用在WindowBuild…...

编程日记 2026/4/2 22:09:41

注意力机制深度优化

###一、注意力机制深度优化 1.FlashAttentionV3(2024最新版) # 安装最新版（需H100/A100 GPU） pip install flash-attn3.0.0 --no-build-isolation# 启用FP8混合精度（需H100） model AutoModelForCausalLM.from_pretrained("…...

编程日记 2026/3/20 8:01:00

基于springboot的学习社区博客

编程日记 2026/4/7 1:56:17

选择器