【CSS 选择器的特异度 CSS 继承 CSS 求值过程解析 CSS 布局方式及相关技术】
以下是关于 CSS 选择器特异度、继承、求值过程及布局技术 的详细解析,结合核心概念和实际应用场景:
一、CSS 选择器特异度(Specificity)
1. 特异度规则
特异度用于决定当多个选择器作用于同一元素时,哪个样式优先级更高。计算方式如下:
- 权重层级(从高到低):
!important
> 行内样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器
- 权重值计算:
- ID 选择器:
1-0-0
- 类选择器、属性选择器、伪类(如
:hover
):0-1-0
- 元素选择器、伪元素(如
::before
):0-0-1
- 通配符(
*
)、组合符(+
,>
)等不增加特异度
- ID 选择器:
2. 示例对比
#header .nav li.active {} /* 特异度:1-2-1 (ID=1, 类=2, 元素=1) */
div#sidebar a:hover {} /* 特异度:1-1-2 */
body .menu > ul li {} /* 特异度:0-1-3 */
3. 注意事项
- 避免滥用
!important
和 ID 选择器(难以覆盖和维护) - 使用
:where()
可降低选择器特异度,:is()
则继承最高特异度
二、CSS 继承(Inheritance)
1. 可继承属性
- 文本相关:
font-family
,color
,line-height
,text-align
- 列表相关:
list-style
,list-style-type
- 表格相关:
border-collapse
- 部分视觉属性:
visibility
,cursor
2. 不可继承属性
- 布局相关:
width
,height
,margin
,padding
,border
- 定位相关:
position
,top
,left
- 背景相关:
background
,background-image
3. 显式继承
.child {border: inherit; /* 强制继承父元素的 border 属性 */
}
三、CSS 求值过程解析
浏览器将 CSS 属性值应用到元素时的计算流程:
- 收集所有声明:匹配元素的所有 CSS 规则(包括继承的和直接应用的)
- 解决层叠冲突:
- 按来源优先级排序:
用户 !important
>作者 !important
>作者样式
>用户样式
>浏览器默认
- 特异度高的选择器覆盖低的
- 后定义的规则覆盖先定义的
- 按来源优先级排序:
- 处理继承:若属性可继承且未被显式设置,继承父元素的值
- 应用默认值:未匹配任何规则时,使用浏览器默认样式
- 计算值转换:
- 将相对单位(如
em
,%
)转换为绝对值(如px
) - 处理函数(如
calc()
)和变量(var(--x)
)
- 将相对单位(如
- 生成最终值:得到实际渲染使用的值(如
width: 50%
转换为具体像素)
四、CSS 布局方式及相关技术
1. 传统布局
- 文档流:默认布局方式,块级元素垂直排列,行级元素水平排列
- 浮动(Float):
.left { float: left; width: 30%; } .right { float: right; width: 70%; }
- 需配合
clearfix
解决父容器高度塌陷
- 需配合
- 定位(Position):
relative
:相对自身原始位置偏移absolute
:相对最近非static
定位的祖先元素定位fixed
:相对视口定位sticky
:滚动时吸附效果
2. 现代布局
-
Flexbox(一维布局):
.container {display: flex;justify-content: space-between;align-items: center; }
- 适用场景:导航栏、等高布局、动态内容对齐
-
Grid(二维布局):
.container {display: grid;grid-template-columns: 1fr 2fr;gap: 20px; }
- 适用场景:复杂网格布局、响应式设计
-
多列布局:
.article {column-count: 3;column-gap: 30px; }
3. 响应式布局技术
- 媒体查询(Media Queries):
@media (max-width: 768px) {.sidebar { display: none; } }
- 视口单位:
vw
,vh
,vmin
,vmax
- 容器查询(Container Queries)(实验性):
@container (min-width: 500px) {.card { flex-direction: row; } }
4. 其他布局方案
- 表格布局:
display: table
(语义化不推荐) - 圣杯布局/双飞翼布局:传统三栏布局方案(已被 Flex/Grid 替代)
- Subgrid(CSS Grid Level 2):嵌套网格与父网格对齐
五、布局选择策略
需求场景 | 推荐技术 |
---|---|
简单一维排列(水平/垂直居中) | Flexbox |
复杂二维网格布局 | CSS Grid |
响应式多列内容 | 媒体查询 + Flex/Grid |
固定位置元素(如导航栏) | position: fixed |
等高布局 | Flexbox 或 Grid |
瀑布流布局 | Grid + grid-auto-rows: masonry (实验性) |
总结流程图
CSS 规则应用流程:
选择器匹配 → 特异度排序 → 继承处理 → 默认值填充 → 计算值转换 → 最终渲染布局技术演进:
传统流式 → Float → Flex → Grid → 容器查询(未来)
通过理解这些核心机制,可以更高效地编写可维护的 CSS 代码并优化页面性能。
相关文章:
【CSS 选择器的特异度 CSS 继承 CSS 求值过程解析 CSS 布局方式及相关技术】
以下是关于 CSS 选择器特异度、继承、求值过程及布局技术 的详细解析,结合核心概念和实际应用场景: 一、CSS 选择器特异度(Specificity) 1. 特异度规则 特异度用于决定当多个选择器作用于同一元素时,哪个样式优先级更…...
Vue+ElementPlus的一些问题修复汇总
目录 一、ElementPlusVue-router做侧边栏问题 二、 组件样式问题 2.1修改文字颜色、大小、粗细、边框的颜色 2.2修改聚焦后文字的颜色、边框的颜色 2.3修改鼠标悬浮时文字的颜色、边框的颜色 三、 组件样式问题 3.1修改文字颜色、大小、粗细 四、 样式问题 4.1当数据为空…...
单链表删除算法(p=L; j=0;与p=p->next;j=1的辨析)
算法描述 Status ListDelete(LinkList &L,int i) { //在带头结点的单链表 L 中,删除第 i 个元素 pL; j0; while ((p->next) && (j<i-1)) {pp->next; j;} if (!(p->next)||(j>i-1)) return ERROR; qp->nex…...
从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯
目录 前言 HAL库对GPIO的抽象 核心分析:HAL_GPIO_Init 前言 我们终于到达了熟悉的地方,对GPIO的初始化。经过漫长的铺垫,我们终于历经千辛万苦,来到了这里。关于GPIO的八种模式等更加详细的细节,由于只是点个灯&am…...
vue2项目打包后js文件过大, 首次加载缓慢
vue2项目打包后js文件过大, 首次加载缓慢 安装插件 npm i compression-webpack-plugin6.1.1 -D配置vue.config.js const CompressionWebpackPlugin require(compression-webpack-plugin)module.exports {configureWebpack: {plugins:[new CompressionWebpackPlugin({filen…...
llama.cpp 一键运行本地大模型 - Windows
文章目录 llama.cpp 一键运行本地大模型 - Windows嘿,咱来唠唠 llama.cpp 这玩意儿!gguf 格式是啥?咱得好好说道说道基座模型咋选?所需物料,咱得准备齐全咯核心命令,得记牢啦运行方式咋选?测试应…...
Android 老项目 jcenter 库失效
最近重新维护了一些老项目发现大部分jcenter库失效了, Could not resolve com.xx:2.1.3. 如果你也遇到了,不妨试试 替换为 aliyun的jcenter服务,就不用一个个找代替库了。 project 下的 build.gradle 文件添加: maven { url htt…...
MyBatis简明教程
MyBatis 是一个用于简化数据库操作的持久层框架,它的核心思想是 将 SQL 与 Java 代码解耦,让开发者专注于 SQL 的编写,同时自动处理重复的数据库操作步骤。 一、核心思想:SQL 与 Java 解耦 传统 JDBC 需要开发者手动管理数据库连…...
【Golang 面试题】每日 3 题(六十八)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…...
DeepSeek个人知识库
deepseek构建个人知识库 安装软件链接 : 安装链接 先在本地把deepseek跑起来,本地部署deepseek见前文链接: 本地部署ollama # 目前软件只支持1.5b小模型,将就着用 ollama run deepseek-r1:1.5b等服务器启动后开启软件 上传文件 输入消息 (…...
力扣练习之字符串的最大公因子
使用语言:c 题目: 对于字符串 s 和 t,只有在 s t t t ... t t(t 自身连接 1 次或多次)时,我们才认定 “t 能除尽 s”。 给定两个字符串 str1 和 str2 。返回 最长字符串 x,要求满足 x 能…...
姿态矩阵/旋转矩阵/反对称阵
物理意义,端点矢量角速率叉乘本身向量; 负号是动系b看固定系i是相反的; 一个固定 在惯性导航解算中,旋转矢量的叉乘用于描述姿态矩阵的微分方程。你提到的公式中, ω i b b \boldsymbol{\omega}_{ib}^b \times ωibb…...
项目一 - 任务3:搭建Java集成开发环境IntelliJ IDEA
通过本次实战,我们成功搭建了Java集成开发环境IntelliJ IDEA,并完成了多个任务。首先,安装了IntelliJ IDEA并进行了个性化设置,如选择主题、调整字体和编码等。接着,创建了Java项目、包和类,编写并运行了简…...
C++的类型转换
目录 一、隐式类型转换的触发场景 1.基本数据类型间的转换 i.提升转换 ii.截断转换 2.类与对象的转换 i.单参数构造函数 ii.类型转换运算符 3.继承体系中的指针/引用转换 向上转型 二、隐式转换的风险与问题 1.意外行为 2.二义性错误 3.性能损耗 三、C强制类型转…...
嵌入式项目:STM32刷卡指纹智能门禁系统
本文详细介绍基于STM32的刷卡指纹智能门禁系统。 获取资料/指导答疑/技术交流/选题/帮助,请点链接: https://gitee.com/zengzhaorong/share_contact/blob/master/stm32.txt 1 系统功能 1.1 功能概述 本系统由STM32硬件端(下位机)…...
DeepSeek基础之机器学习
文章目录 一、核心概念总结(一)机器学习基本定义(二)基本术语(三)假设空间(四)归纳偏好(五)“没有免费的午餐”定理(NFL 定理) 二、重…...
Docker 搭建 Nginx 服务器
系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器,挂载本地目录七、修改 ngin…...
【Docker基础】理解 Docker:本质、性质、架构与核心组件
文章目录 Docker 本质Docker 的引擎迭代Docker 和虚拟机的区别Docker 为什么比虚拟机资源利用率高,速度快?Docker 和 JVM 虚拟化的区别Docker 版本1. LXC (Linux Containers)2. libcontainer3. Moby4. docker-ce5. docker-ee总结: Docker 架构…...
QT:QLinearGradient、QRadialGradient、QConicalGradient
QLinearGradient QLinearGradient 是 Qt 框架中用于创建线性渐变的类,它允许在图形绘制中实现颜色沿着一条直线的平滑过渡效果。以下是关于 QLinearGradient 的详细介绍: 基本概念:线性渐变是指颜色从一个点(起始点)沿…...
MySql:Authentication plugin ‘caching sha2 password‘ cannot be loaded
报错问题解释 在 MySQL 数据库中,如果你尝试使用 caching_sha2_password 插件进行认证,但是遇到错误信息 "Authentication plugin caching sha2 password cannot be loaded",这通常意味着客户端库或者连接器不兼容或者没有正确配置…...
c++类知识点复习与总结
类 c 是一种人机交互的面向对象的编程语言,面向对象思想主要体现在 类 上。 类是具有相同属性和相同行为的对象的集合, 具有封装,继承,多态的特性。 类的定义 class 类名 { }; 封装 例如:人就是一种类…...
Redis快速入门
一、Redis介绍 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings),散列(has…...
嵌入式开发:傅里叶变换(5):STM32和Matlab联调验证FFT
目录 1. MATLAB获取 STM32 的原始数据 2. 将数据上传到电脑 3. MATLAB 接收数据并验证 STM32进行傅里叶代码 结果分析 STM32 和 MATLAB 联调是嵌入式开发中常见的工作流程,通常目的是将 STM32 采集的数据或控制信号传输到 MATLAB 中进行实时处理、分析和可视化…...
LLM/VLM进行票据识别工作
票据识别任务的需求是给定不同类型的票据图像,提取出指定的字段值,以json格式给出结构化信息。 目前的范式包括OCR,OCRLLM, OCRVLM,VLM四种方法。 一、OCR 利用OCR技术进行图像文字识别。 例如:https://github.c…...
AWS SDK for Java 1.x 403问题解决方法和原因
问题表现 使用AWS SDK for Java 1.x访问S3,已经确认文件存在,且具有权限,仍然出现403 Forbidden应答。 解决方法 升级到AWS SDK for Java 2.x。 问题原因 AWS签名机制严格依赖请求的精确路径格式,任何URI的差异(如…...
Spring Boot 项目中,JDK 动态代理和 CGLIB 动态代理的使用
在 Spring Boot 项目中,JDK 动态代理和 CGLIB 动态代理都是实现 AOP (面向切面编程) 的重要技术。 它们的主要区别在于代理对象的生成方式和适用范围。 下面详细介绍它们的使用场景: 1. JDK 动态代理 (JDK Dynamic Proxy) 原理: JDK 动态代理…...
蓝桥杯备赛-精卫填海-DP
精卫终于快把东海填平了!只剩下了最后的一小片区域了。同时,西山上的木石也已经不多了。精卫能把东海填平吗? 事实上,东海未填平的区域还需要至少体积为 v 的木石才可以填平,而西山上的木石还剩下 n 块,每块…...
萌新学 Python 之闭包函数
闭包函数:在一个函数体内嵌套函数,是一个函数对象,允许在内部函数中修改或引用外部函数的变量 闭包函数对数据有封存功能 闭包函数需要满足以下几个条件: 1.函数必须有一个嵌套函数,在定义函数时,内部再…...
AI创作教程:用deepseek和猫箱做互动故事游戏
年轻的时候我看过典型的玛丽苏文学、小妞文学,老了虽然识破这是给女孩编织的琉璃般的梦,看起来梦幻美丽其实一击就碎,会伤人的碎渣渣。【叠甲完毕】 本来我想用橙光的,但是橙光的话,最好把剧本和立绘都多打磨一下。快…...
【Linux探索学习】第三十一弹——线程互斥与同步(下):深入理解确保线程安全的机制
线程互斥与同步(上):【Linux探索学习】第三十弹——线程互斥与同步(上):深入理解线程保证安全的机制-CSDN博客 Linux探索学习: https://blog.csdn.net/2301_80220607/category_12805278.html?…...
博客系统完整开发流程
前言 通过前⾯课程的学习, 我们掌握了Spring框架和MyBatis的基本使用, 并完成了图书管理系统的常规功能开发, 接下来我们系统的从0到1完成⼀个项⽬的开发. 企业开发的流程 1. 需求评审(产品经理(PM)会和运营(想口号),UI,测试,开发等沟通) ,会涉及到背景/目标/怎么做,可能会有多…...
【C++】面试常问八股
5、内存管理 野指针 野指针指的是未进行初始化或未清零的指针,不是NULL指针野指针产生原因及解决方案: 指针变量未初始化:指针变量定义时若未初始化,则其指向的地址是随机的,不为NULL;定义时初始化为NULL…...
自定义提交按钮触发avue-form绑定的submit事件
场景 使用avue-form时,提交按钮会绑定至form区域下方,如果想自定义按钮位置,需要通过dialog的footer位置进行编写,例如: <avue-form ref"form" v-model"dataInfo" :option"dataInfoOpti…...
HarmonyOS 无线调试
下载sdk 找到hdc位置> C:\Users\27638\AppData\Local\OpenHarmony\Sdk\14\toolchains 不要去DevEco Studio的窗口不知道为什么调不动 hdc tconn IP:PORT...
Android之APP更新(通过接口更新)
文章目录 前言一、效果图二、实现步骤1.AndroidManifest权限申请2.activity实现3.有版本更新弹框UpdateappUtilDialog4.下载弹框DownloadAppUtils5.弹框背景图 总结 前言 对于做Android的朋友来说,APP更新功能再常见不过了,因为平台更新审核时间较长&am…...
二、大模型微调技术栈全解析
大模型微调技术栈全解析:从微调方法到算力支撑 在大模型的领域中,微调(Fine-tuning)就像是为模型量身定制的高级裁缝服务,能够让通用的大模型更好地适应特定的任务和场景。而要完成这项精细的工作,需要一整…...
设置 C++ 开发环境
设置 C++ 开发环境 C++ 是一种通用编程语言,现在广泛用于竞争性编程。它具有命令式、面向对象的和通用编程功能。 C++ 可以在许多平台上运行,如 Windows、Linux、Unix、Mac 等。在我们开始使用 C++ 编程之前。我们需要在本地计算机上设置一个环境,以便成功编译和运行我们的…...
计算机基础知识
1、RAM和ROM RAM:随机存取存储器,也叫做主存。是与CPU直接交换数据的内部存储器。这种存储器在断电时将丢失其数据,故主要用于短时间使用的程序。 ROM:即只读存储,是一种只能读出事先所存数据的固态半导体存储器 2、…...
蓝桥杯——按键
一:按键得原理图 二:按键的代码配置 step1 按键原理图对应引脚配置为输入状态 step2 在GPIO中将对应引脚设置为上拉模式 step3 在fun.c中写按键扫描函数 写完后的扫描函数需放在主函数中不断扫描 扫描函数主要通过两个定义变量的值来判断…...
Zemax OpticStudio 中的扩散器建模
在 Zemax OpticStudio 中构建漫射器涉及创建散射或漫射光的表面或物体。以下是有关如何在 Zemax OpticStudio 中创建漫射器的一般指南: 转到非序列模式 (NSC) 选项卡。NSC 对于模拟与物体而非表面相互作用的非序列射线很有用。 在需要散光器的位置创建新对象。对象…...
网络安全防御:蓝队重保备战与应急溯源深度解析
课程目标 本课程旨在培养专业的网络安全蓝队成员,通过系统化的学习和实战演练,使学员能够掌握网络安全防御的核心技能,包括资产测绘、应急响应、系统安全应急溯源分析、网络层溯源分析以及综合攻防演练等。学员将能够熟练运用各种工具和技术…...
MySQL 和 Elasticsearch 之间的数据同步
MySQL 和 Elasticsearch 之间的数据同步是常见的需求,通常用于将结构化数据从关系型数据库同步到 Elasticsearch 以实现高效的全文搜索、聚合分析和实时查询。以下是几种常用的同步方案及其实现方法: 1. 应用层双写(双写模式) 原…...
【深度学习】矩阵的核心问题解析
一、基础问题 1. 如何实现两个矩阵的乘法? 问题描述:给定两个矩阵 A A A和 B B B,编写代码实现矩阵乘法。 解法: 使用三重循环实现标准矩阵乘法。 或者使用 NumPy 的 dot 方法进行高效计算。 def matrix_multiply(A, B):m, n …...
汽车开放系统架构(AUTOSAR)中运行时环境(RTE)生成过程剖析
一、引言 在当今高度智能化的汽车电子领域,软件系统的复杂性呈指数级增长。为了应对这一挑战,汽车开放系统架构(AUTOSAR)应运而生,它为汽车电子软件开发提供了标准化的分层架构和开发方法。其中,运行时环境…...
VC++零基础入门之系列教程 【附录E MFC快速参考指南】
附录E MFC快速参考指南 E.1 创建窗口 使用M F C CWnd wnd; W n d . C r e a t e E x ( E xSt y l e , C l a s s N a m e , Wi n d o w N a m e , S t y l e , x , y, Wi d t h , H e i g h t , P a r e n t , M e n u , P a r a m ) ; 使用A P I HWND hwnd=::CreateWi n d …...
Holoens2开发报错记录02_通过主机获取彩色和深度数据流常见错误
01.E1696 E1696 无法打开源文件 “stdio.h” 解决方法: 更新一下SDK 1)打开Visual Studio Installer,点击修改 2)安装详细信息中自己系统对应的SDK,点击修改即可 02.WinError 10060 方法来源 解决方法:…...
粉色和紫色渐变壁纸怎么设计?
粉色和紫色的渐变壁纸设计可以打造极为浪漫的氛围,这两种颜色的搭配极具梦幻感与浪漫气息,常被用于各种浪漫主题的设计之中。以下是关于粉色和紫色渐变壁纸的设计方法: 一、渐变方向设计 横向渐变:从画面左侧的粉色过渡到右侧的紫…...
maven Problem shading JAR的几个解决方案
1 现象 Error creating shaded jar: Problem shading JAR :xxxxxx.jar entry META-INF/versions/11/com/fasterxml/jackson/core/io/doubleparser/BigSignificand.class: java.lang.IllegalArgumentException -> [Help 1] 2 原因 这个问题通常是由于 maven-s…...
前缀和代码解析
前缀和是指数组一定范围的数的总和,常见的有两种,一维和二维,我会用两道题来分别解析 一维 DP34 【模板】前缀和 题目: 题目解析: 暴力解法 直接遍历数组,遍历到下标为 l 时,开始进行相加,直到遍历到下标为 r ,最后返回总和.这样做的时间复杂度为: O(n) public class Main …...
CaffeineCache自定义缓存时间
文章目录 1、POM文件依赖2、声明缓存3、缓存使用4、测试缓存5、自定义缓存过期时间6、测试自定义超时时间 1、POM文件依赖 <dependency><groupId>com.github.ben-manes.caffeine</groupId><artifactId>caffeine</artifactId><version>3.1…...