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

【CSS 选择器的特异度 CSS 继承 CSS 求值过程解析 CSS 布局方式及相关技术】

以下是关于 CSS 选择器特异度、继承、求值过程及布局技术 的详细解析,结合核心概念和实际应用场景:


一、CSS 选择器特异度(Specificity)

1. 特异度规则

特异度用于决定当多个选择器作用于同一元素时,哪个样式优先级更高。计算方式如下:

  • 权重层级(从高到低):
    • !important > 行内样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器
  • 权重值计算
    • ID 选择器:1-0-0
    • 类选择器、属性选择器、伪类(如 :hover):0-1-0
    • 元素选择器、伪元素(如 ::before):0-0-1
    • 通配符(*)、组合符(+, >)等不增加特异度
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 属性值应用到元素时的计算流程:

  1. 收集所有声明:匹配元素的所有 CSS 规则(包括继承的和直接应用的)
  2. 解决层叠冲突
    • 按来源优先级排序:用户 !important > 作者 !important > 作者样式 > 用户样式 > 浏览器默认
    • 特异度高的选择器覆盖低的
    • 后定义的规则覆盖先定义的
  3. 处理继承:若属性可继承且未被显式设置,继承父元素的值
  4. 应用默认值:未匹配任何规则时,使用浏览器默认样式
  5. 计算值转换
    • 将相对单位(如 em, %)转换为绝对值(如 px
    • 处理函数(如 calc())和变量(var(--x)
  6. 生成最终值:得到实际渲染使用的值(如 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&#xff08;LinkList &L,int i&#xff09; { //在带头结点的单链表 L 中&#xff0c;删除第 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的抽象 核心分析&#xff1a;HAL_GPIO_Init 前言 我们终于到达了熟悉的地方&#xff0c;对GPIO的初始化。经过漫长的铺垫&#xff0c;我们终于历经千辛万苦&#xff0c;来到了这里。关于GPIO的八种模式等更加详细的细节&#xff0c;由于只是点个灯&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嘿&#xff0c;咱来唠唠 llama.cpp 这玩意儿&#xff01;gguf 格式是啥&#xff1f;咱得好好说道说道基座模型咋选&#xff1f;所需物料&#xff0c;咱得准备齐全咯核心命令&#xff0c;得记牢啦运行方式咋选&#xff1f;测试应…...

Android 老项目 jcenter 库失效

最近重新维护了一些老项目发现大部分jcenter库失效了&#xff0c; Could not resolve com.xx:2.1.3. 如果你也遇到了&#xff0c;不妨试试 替换为 aliyun的jcenter服务&#xff0c;就不用一个个找代替库了。 project 下的 build.gradle 文件添加&#xff1a; maven { url htt…...

MyBatis简明教程

MyBatis 是一个用于简化数据库操作的持久层框架&#xff0c;它的核心思想是 将 SQL 与 Java 代码解耦&#xff0c;让开发者专注于 SQL 的编写&#xff0c;同时自动处理重复的数据库操作步骤。 一、核心思想&#xff1a;SQL 与 Java 解耦 传统 JDBC 需要开发者手动管理数据库连…...

【Golang 面试题】每日 3 题(六十八)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

DeepSeek个人知识库

deepseek构建个人知识库 安装软件链接 : 安装链接 先在本地把deepseek跑起来&#xff0c;本地部署deepseek见前文链接: 本地部署ollama # 目前软件只支持1.5b小模型&#xff0c;将就着用 ollama run deepseek-r1:1.5b等服务器启动后开启软件 上传文件 输入消息 &#xff08…...

力扣练习之字符串的最大公因子

使用语言&#xff1a;c 题目&#xff1a; 对于字符串 s 和 t&#xff0c;只有在 s t t t ... t t&#xff08;t 自身连接 1 次或多次&#xff09;时&#xff0c;我们才认定 “t 能除尽 s”。 给定两个字符串 str1 和 str2 。返回 最长字符串 x&#xff0c;要求满足 x 能…...

姿态矩阵/旋转矩阵/反对称阵

物理意义&#xff0c;端点矢量角速率叉乘本身向量&#xff1b; 负号是动系b看固定系i是相反的&#xff1b; 一个固定 在惯性导航解算中&#xff0c;旋转矢量的叉乘用于描述姿态矩阵的微分方程。你提到的公式中&#xff0c; ω i b b \boldsymbol{\omega}_{ib}^b \times ωibb…...

项目一 - 任务3:搭建Java集成开发环境IntelliJ IDEA

通过本次实战&#xff0c;我们成功搭建了Java集成开发环境IntelliJ IDEA&#xff0c;并完成了多个任务。首先&#xff0c;安装了IntelliJ IDEA并进行了个性化设置&#xff0c;如选择主题、调整字体和编码等。接着&#xff0c;创建了Java项目、包和类&#xff0c;编写并运行了简…...

C++的类型转换

目录 一、隐式类型转换的触发场景 1.基本数据类型间的转换 i.提升转换 ii.截断转换 2.类与对象的转换 i.单参数构造函数 ii.类型转换运算符 3.继承体系中的指针/引用转换 向上转型 二、隐式转换的风险与问题 1.意外行为 2.二义性错误 3.性能损耗 三、C强制类型转…...

嵌入式项目:STM32刷卡指纹智能门禁系统

本文详细介绍基于STM32的刷卡指纹智能门禁系统。 获取资料/指导答疑/技术交流/选题/帮助&#xff0c;请点链接&#xff1a; https://gitee.com/zengzhaorong/share_contact/blob/master/stm32.txt 1 系统功能 1.1 功能概述 本系统由STM32硬件端&#xff08;下位机&#xff09;…...

DeepSeek基础之机器学习

文章目录 一、核心概念总结&#xff08;一&#xff09;机器学习基本定义&#xff08;二&#xff09;基本术语&#xff08;三&#xff09;假设空间&#xff08;四&#xff09;归纳偏好&#xff08;五&#xff09;“没有免费的午餐”定理&#xff08;NFL 定理&#xff09; 二、重…...

Docker 搭建 Nginx 服务器

系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器&#xff0c;挂载本地目录七、修改 ngin…...

【Docker基础】理解 Docker:本质、性质、架构与核心组件

文章目录 Docker 本质Docker 的引擎迭代Docker 和虚拟机的区别Docker 为什么比虚拟机资源利用率高&#xff0c;速度快&#xff1f;Docker 和 JVM 虚拟化的区别Docker 版本1. LXC (Linux Containers)2. libcontainer3. Moby4. docker-ce5. docker-ee总结&#xff1a; Docker 架构…...

QT:QLinearGradient、QRadialGradient、QConicalGradient

QLinearGradient QLinearGradient 是 Qt 框架中用于创建线性渐变的类&#xff0c;它允许在图形绘制中实现颜色沿着一条直线的平滑过渡效果。以下是关于 QLinearGradient 的详细介绍&#xff1a; 基本概念&#xff1a;线性渐变是指颜色从一个点&#xff08;起始点&#xff09;沿…...

MySql:Authentication plugin ‘caching sha2 password‘ cannot be loaded

报错问题解释 在 MySQL 数据库中&#xff0c;如果你尝试使用 caching_sha2_password 插件进行认证&#xff0c;但是遇到错误信息 "Authentication plugin caching sha2 password cannot be loaded"&#xff0c;这通常意味着客户端库或者连接器不兼容或者没有正确配置…...

c++类知识点复习与总结

类 c 是一种人机交互的面向对象的编程语言&#xff0c;面向对象思想主要体现在 类 上。 类是具有相同属性和相同行为的对象的集合&#xff0c; 具有封装&#xff0c;继承&#xff0c;多态的特性。 类的定义 class 类名 { }&#xff1b; 封装 例如&#xff1a;人就是一种类…...

Redis快速入门

一、Redis介绍 Redis 是一个开源&#xff08;BSD许可&#xff09;的&#xff0c;内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构&#xff0c;如 字符串&#xff08;strings&#xff09;&#xff0c;散列&#xff08;has…...

嵌入式开发:傅里叶变换(5):STM32和Matlab联调验证FFT

目录 1. MATLAB获取 STM32 的原始数据 2. 将数据上传到电脑 3. MATLAB 接收数据并验证 STM32进行傅里叶代码 结果分析 STM32 和 MATLAB 联调是嵌入式开发中常见的工作流程&#xff0c;通常目的是将 STM32 采集的数据或控制信号传输到 MATLAB 中进行实时处理、分析和可视化…...

LLM/VLM进行票据识别工作

​ 票据识别任务的需求是给定不同类型的票据图像&#xff0c;提取出指定的字段值&#xff0c;以json格式给出结构化信息。 目前的范式包括OCR&#xff0c;OCRLLM, OCRVLM&#xff0c;VLM四种方法。 一、OCR 利用OCR技术进行图像文字识别。 例如&#xff1a;https://github.c…...

AWS SDK for Java 1.x 403问题解决方法和原因

问题表现 使用AWS SDK for Java 1.x访问S3&#xff0c;已经确认文件存在&#xff0c;且具有权限&#xff0c;仍然出现403 Forbidden应答。 解决方法 升级到AWS SDK for Java 2.x。 问题原因 AWS签名机制严格依赖请求的精确路径格式&#xff0c;任何URI的差异&#xff08;如…...

Spring Boot 项目中,JDK 动态代理和 CGLIB 动态代理的使用

在 Spring Boot 项目中&#xff0c;JDK 动态代理和 CGLIB 动态代理都是实现 AOP (面向切面编程) 的重要技术。 它们的主要区别在于代理对象的生成方式和适用范围。 下面详细介绍它们的使用场景&#xff1a; 1. JDK 动态代理 (JDK Dynamic Proxy) 原理&#xff1a; JDK 动态代理…...

蓝桥杯备赛-精卫填海-DP

精卫终于快把东海填平了&#xff01;只剩下了最后的一小片区域了。同时&#xff0c;西山上的木石也已经不多了。精卫能把东海填平吗&#xff1f; 事实上&#xff0c;东海未填平的区域还需要至少体积为 v 的木石才可以填平&#xff0c;而西山上的木石还剩下 n 块&#xff0c;每块…...

萌新学 Python 之闭包函数

闭包函数&#xff1a;在一个函数体内嵌套函数&#xff0c;是一个函数对象&#xff0c;允许在内部函数中修改或引用外部函数的变量 闭包函数对数据有封存功能 闭包函数需要满足以下几个条件&#xff1a; 1.函数必须有一个嵌套函数&#xff0c;在定义函数时&#xff0c;内部再…...

AI创作教程:用deepseek和猫箱做互动故事游戏

年轻的时候我看过典型的玛丽苏文学、小妞文学&#xff0c;老了虽然识破这是给女孩编织的琉璃般的梦&#xff0c;看起来梦幻美丽其实一击就碎&#xff0c;会伤人的碎渣渣。【叠甲完毕】 本来我想用橙光的&#xff0c;但是橙光的话&#xff0c;最好把剧本和立绘都多打磨一下。快…...

【Linux探索学习】第三十一弹——线程互斥与同步(下):深入理解确保线程安全的机制

线程互斥与同步&#xff08;上&#xff09;&#xff1a;【Linux探索学习】第三十弹——线程互斥与同步&#xff08;上&#xff09;&#xff1a;深入理解线程保证安全的机制-CSDN博客 Linux探索学习&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?…...

博客系统完整开发流程

前言 通过前⾯课程的学习, 我们掌握了Spring框架和MyBatis的基本使用, 并完成了图书管理系统的常规功能开发, 接下来我们系统的从0到1完成⼀个项⽬的开发. 企业开发的流程 1. 需求评审(产品经理(PM)会和运营(想口号),UI,测试,开发等沟通) ,会涉及到背景/目标/怎么做,可能会有多…...

【C++】面试常问八股

5、内存管理 野指针 野指针指的是未进行初始化或未清零的指针&#xff0c;不是NULL指针野指针产生原因及解决方案&#xff1a; 指针变量未初始化&#xff1a;指针变量定义时若未初始化&#xff0c;则其指向的地址是随机的&#xff0c;不为NULL&#xff1b;定义时初始化为NULL…...

自定义提交按钮触发avue-form绑定的submit事件

场景 使用avue-form时&#xff0c;提交按钮会绑定至form区域下方&#xff0c;如果想自定义按钮位置&#xff0c;需要通过dialog的footer位置进行编写&#xff0c;例如&#xff1a; <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的朋友来说&#xff0c;APP更新功能再常见不过了&#xff0c;因为平台更新审核时间较长&am…...

二、大模型微调技术栈全解析

大模型微调技术栈全解析&#xff1a;从微调方法到算力支撑 在大模型的领域中&#xff0c;微调&#xff08;Fine-tuning&#xff09;就像是为模型量身定制的高级裁缝服务&#xff0c;能够让通用的大模型更好地适应特定的任务和场景。而要完成这项精细的工作&#xff0c;需要一整…...

设置 C++ 开发环境

设置 C++ 开发环境 C++ 是一种通用编程语言,现在广泛用于竞争性编程。它具有命令式、面向对象的和通用编程功能。 C++ 可以在许多平台上运行,如 Windows、Linux、Unix、Mac 等。在我们开始使用 C++ 编程之前。我们需要在本地计算机上设置一个环境,以便成功编译和运行我们的…...

计算机基础知识

1、RAM和ROM RAM&#xff1a;随机存取存储器&#xff0c;也叫做主存。是与CPU直接交换数据的内部存储器。这种存储器在断电时将丢失其数据&#xff0c;故主要用于短时间使用的程序。 ROM&#xff1a;即只读存储&#xff0c;是一种只能读出事先所存数据的固态半导体存储器 2、…...

蓝桥杯——按键

一&#xff1a;按键得原理图 二&#xff1a;按键的代码配置 step1 按键原理图对应引脚配置为输入状态 step2 在GPIO中将对应引脚设置为上拉模式 step3 在fun.c中写按键扫描函数 写完后的扫描函数需放在主函数中不断扫描 扫描函数主要通过两个定义变量的值来判断&#xf…...

Zemax OpticStudio 中的扩散器建模

在 Zemax OpticStudio 中构建漫射器涉及创建散射或漫射光的表面或物体。以下是有关如何在 Zemax OpticStudio 中创建漫射器的一般指南&#xff1a; 转到非序列模式 (NSC) 选项卡。NSC 对于模拟与物体而非表面相互作用的非序列射线很有用。 在需要散光器的位置创建新对象。对象…...

网络安全防御:蓝队重保备战与应急溯源深度解析

课程目标 本课程旨在培养专业的网络安全蓝队成员&#xff0c;通过系统化的学习和实战演练&#xff0c;使学员能够掌握网络安全防御的核心技能&#xff0c;包括资产测绘、应急响应、系统安全应急溯源分析、网络层溯源分析以及综合攻防演练等。学员将能够熟练运用各种工具和技术…...

MySQL 和 Elasticsearch 之间的数据同步

MySQL 和 Elasticsearch 之间的数据同步是常见的需求&#xff0c;通常用于将结构化数据从关系型数据库同步到 Elasticsearch 以实现高效的全文搜索、聚合分析和实时查询。以下是几种常用的同步方案及其实现方法&#xff1a; 1. 应用层双写&#xff08;双写模式&#xff09; 原…...

【深度学习】矩阵的核心问题解析

一、基础问题 1. 如何实现两个矩阵的乘法&#xff1f; 问题描述&#xff1a;给定两个矩阵 A A A和 B B B&#xff0c;编写代码实现矩阵乘法。 解法&#xff1a; 使用三重循环实现标准矩阵乘法。 或者使用 NumPy 的 dot 方法进行高效计算。 def matrix_multiply(A, B):m, n …...

汽车开放系统架构(AUTOSAR)中运行时环境(RTE)生成过程剖析

一、引言 在当今高度智能化的汽车电子领域&#xff0c;软件系统的复杂性呈指数级增长。为了应对这一挑战&#xff0c;汽车开放系统架构&#xff08;AUTOSAR&#xff09;应运而生&#xff0c;它为汽车电子软件开发提供了标准化的分层架构和开发方法。其中&#xff0c;运行时环境…...

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” 解决方法&#xff1a; 更新一下SDK 1&#xff09;打开Visual Studio Installer&#xff0c;点击修改 2&#xff09;安装详细信息中自己系统对应的SDK&#xff0c;点击修改即可 02.WinError 10060 方法来源 解决方法&#xff1a…...

粉色和紫色渐变壁纸怎么设计?

粉色和紫色的渐变壁纸设计可以打造极为浪漫的氛围&#xff0c;这两种颜色的搭配极具梦幻感与浪漫气息&#xff0c;常被用于各种浪漫主题的设计之中。以下是关于粉色和紫色渐变壁纸的设计方法&#xff1a; 一、渐变方向设计 横向渐变&#xff1a;从画面左侧的粉色过渡到右侧的紫…...

maven Problem shading JAR的几个解决方案

1 现象 Error creating shaded jar: Problem shading JAR &#xff1a;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…...