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

【CSS重点知识】属性计算的过程

news 2026/3/31 12:07:13

csdn动态图标

✍️ 作者简介: 前端新手学习中。

💂 作者主页: 作者主页查看更多前端教学

🎓 专栏分享：css重难点教学   Node.js教学 从头开始学习   ajax学习

标题

  • 什么是计算机属性
    • 确定声明值
    • 层叠冲突
    • 继承
    • 使用默认值
  • 总结

什么是计算机属性

CSS属性值的计算过程是指一个元素从所有属性都没有值，到所有属性都有值的过程。
这个过程分为四个步骤：确定声明值，层叠冲突，使用继承和使用默认值。

确定声明值

参考样式表（作者样式表+浏览器默认样式表）中没有冲突的声明，作为CSS属性值,如果你设置的属性跟浏览器默认属性重合了，那么就是有冲突的属性，如果没有冲突那么就作为css的属性,同时还会进行css预设值的处理。

作者样式表

就是你自己给这个网页写的样式。

默认样式表

浏览器自带的样式，自动生成的样式。
一个标签是块级元素还是行内元素，这都跟它的默认样式有关，h1标签是一个会计元素是因为自带一个display：block，我们可以在计算属性中查看。

在这里插入图片描述

层叠冲突

层叠冲突是指在CSS中，当多个样式规则应用于同一个元素并且具有相同的特定性时，浏览器需要确定哪个规则应该生效的过程。这种情况通常发生在多个样式表或多个选择器应用于同一个元素时。
为了解决层叠冲突，浏览器会使用一组称为层叠规则的标准来确定哪个样式规则应该生效,分为三个步骤比较重要性，比较特殊性，比较原次序
这些规则考虑了样式规则的来源、特定性和顺序。
例如，内联样式优先于外部样式表中的样式，ID选择器优先于类选择器，
而后定义的规则优先于先定义的规则。

比较重要性
从高到低

  1. 带有important的作者样式
  2. 带有important的默认样式
  3. 作者样式
  4. 默认样式

例

    <style>*{font-size: 16px;}</style>
</head>
<body><h1>坚毅的小解同志</h1>
</body>

在这里插入图片描述
用户样式表高于默认样式表

比较特殊性

styleid属性元素
是否内联id选择器的数量属性，类，伪类选择器的数量元素，伪元素的数量

例

  <style>body h1 {font-size: 10px;}/* (0,0, 0, 2) */body .h1 {font-size: 8px;}/* (0,0, 1, 1) */* {font-size: 16px;}/* (0,0, 0, 0) */</style></head><body><h1 class="h1">坚毅的小解同志</h1></body>

在这里插入图片描述
比较原次序

如果还有冲突，我们可以在这一步比较顺序，最新写的有效果。
例

 <style>body h1 {font-size: 10px;}/* (0,0, 0, 2) */body h1 {font-size: 8px;}/* (0,0, 0, 2) */* {font-size: 16px;}/* (0,0, 0, 0) */</style></head><body><h1 class="h1">坚毅的小解同志</h1></body>

在这里插入图片描述

继承

我们前两步实际上将作者书写的属性进行乐一个筛选得到了作者的值，但是仍然有许多没有设置值的属性，这个时候我们就会来到继承这一步，并不是所有的属性都会被继承，一般可以继承的值都是文本类型的值。
我举个例子大家就能理解了。

例

 <style>div{color: red;}</style></head><body><div><h1 class="h1">坚毅的小解同志</h1>
</div></body>

在这里插入图片描述
给外面的div标签 将颜色设置成红色，里面的h1标签没有设置color颜色，于是继承了父级标签，也变成了红色，这就是继承。

使用默认值

不能继承，作者也没有设置属性，那么就会使用默认属性。

总结

注意 前两部是筛选作者属性，第一步对比的是作者属性，和浏览器默认属性（作者代写属性）， 大家需要把浏览器默认属性，和默认属性分开。
学习css 属性计算是一个非常重要的基础，需要好好学习。

相关文章：

【CSS重点知识】属性计算的过程

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 ajax学习 标题什么是计算机属性确定声明值层叠冲突继承使用默认值总结什么是计算机属性 CSS属性值的计算…...

编程日记 2023/4/16 11:21:16

Java避免死锁的几个常见方法(有测试代码和分析过程)

目录 Java避免死锁的几个常见方法 死锁产生的条件 上死锁代码 然后 &#xff1a;jstack 14320 >> jstack.text Java避免死锁的几个常见方法 Java避免死锁的几个常见方法 避免一个线程同时获取多个锁。避免一个线程在锁内同时占用多个资源&#xff0c;尽量保证每个锁…...

编程日记 2023/4/16 11:16:15

go binary包

binary包使用与详解 最近在看一个第三方包的库源码&#xff0c;bigcache&#xff0c;发现其中用到了binary 里面的函数&#xff0c;所以准备研究一下。 可以看到binary 包位于encoding/binary&#xff0c;也就是表示这个包的作用是编辑码作用的&#xff0c;看到文档给出的解释…...

编程日记 2023/4/16 11:11:14

CompletableFuture使用详解（IT枫斗者）

CompletableFuture使用详解 简介 概述 CompletableFuture是对Future的扩展和增强。CompletableFuture实现了Future接口&#xff0c;并在此基础上进行了丰富的扩展&#xff0c;完美弥补了Future的局限性&#xff0c;同时CompletableFuture实现了对任务编排的能力。借助这项能力…...

编程日记 2023/4/16 11:06:13

4.15--设计模式之创建型之责任链模式（总复习版本）---脚踏实地，一步一个脚印

一、什么是责任链模式&#xff1a; 责任链模式属于行为型模式&#xff0c;是为请求创建了一个接收者对象的链&#xff0c;将链中每一个节点看作是一个对象&#xff0c;每个节点处理的请求均不同&#xff0c;且内部自动维护一个下一节点对象。 当一个请求从链式的首端发出时&a…...

编程日记 2023/4/16 11:01:11

STM32+W5500实现以太网通信

STM32系列32位微控制器基于Arm Cortex-M处理器&#xff0c;旨在为MCU用户提供新的开发自由度。它包括一系列产品&#xff0c;集高性能、实时功能、数字信号处理、低功耗/低电压操作、连接性等特性于一身&#xff0c;同时还保持了集成度高和易于开发的特点。本例采用STM32作为MC…...

编程日记 2023/4/16 10:56:10

全网最详细，Jmeter性能测试-性能基础详解，终成测试卷王（一）

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 发起请求 发起HTTP…...

编程日记 2023/4/16 10:51:09

人工智能概述

一、人工智能发展必备三要素 算法 数据 算力 CPU、GPU、TPU 计算力之CPU、GPU对比&#xff1a; CPU主要适合I\O密集型任务GPU主要适合计算密集型任务 什么样的程序适合在GPU上运行&#xff1f; 计算密集型的程序 所谓计算密集型(Compute-intensive)的程序&#xff0c;就是…...

编程日记 2023/4/16 10:46:08

API接口安全—webservice、Swagger、WEBpack

API接口安全—webservice、Swagger、WEBpack1. API接口介绍1.1. 常用的API接口类1.1.1. API接口分类1.1.1.1. 类库型API1.1.1.2. 操作系统型API1.1.1.3. 远程应用型API1.1.1.4. WEB应用型API1.1.1.5. 总结1.1.2. API接口类型1.1.2.1. HTTP类接口1.1.2.2. RPC类接口1.1.2.3. web…...

编程日记 2023/4/16 10:41:07

从前M个字母中取N个的无重复排列 [2*+]

目录 从前M个字母中取N个的无重复排列 [2*+] 程序设计 程序分析 从前M个字母中取N个的无重复排列 [2*+] 输出从前M个字母中取N个的无重复字母排列 Input 输入M N 1<=M=10, N<=M Output 按字典序输出排列 Sample Input 4 2 Sample Output A B A C A D B A B C B …...

编程日记 2023/4/16 10:36:06

ES forceMerge 强制段合并为什么会提升检索性能？

根据以前的测试&#xff0c;forceMerge段合并&#xff0c;将段的个数合并成一个。带来了将近一倍的性能提升&#xff0c;测试过程文档&#xff08;请参考我的另外一篇文章&#xff09;&#xff1a;ES优化实战- forceMerge搜索提升测试报告_es forcemerge_水的精神的博客-CSDN博…...

编程日记 2023/4/16 10:31:05

macOS Ventura 13.3.1 (22E261) Boot ISO 原版可引导镜像

本站下载的 macOS 软件包&#xff0c;既可以拖拽到 Applications&#xff08;应用程序&#xff09;下直接安装&#xff0c;也可以制作启动 U 盘安装&#xff0c;或者在虚拟机中启动安装。另外也支持在 Windows 和 Linux 中创建可引导介质。 macOS Ventura 13.3.1 为 Mac 提供下…...

编程日记 2023/4/16 10:26:04

html+css+JavaScript+json+servlet的社区系统（手把手教学）

目录 课前导读&#xff1a; 一、系统前期准备 二、前端代码的编写 三、登陆页面简介 四、注册页面 五、社区列表页 六、社区详情页 七、社区发帖页 八、注销 九、访问链接 登陆页面http://175.178.20.77:8080/java106_blog_system/login.html 总结&#xff1a; 课前…...

编程日记 2023/4/16 10:21:02

UI Toolkit（1）

UI ToolkitUI Toolkit界面画布设置背景制作UI布局UI Toolkit界面 在Unity 2021LTS版本之后UI Toolkit也被内置在Unity中&#xff0c;Unity有意的想让UI Toolkit 成为UI的主要搭建方式&#xff0c;当然与UGUI相比还是有一定的差别。他们各有有点&#xff0c;这次我们就开始介绍…...

编程日记 2023/4/16 10:16:01

vLive带你走进虚拟直播世界

虚拟直播是什么&#xff1f; 虚拟直播是基于5G实时渲染技术&#xff0c;在绿幕环境下拍摄画面&#xff0c;通过实时抠像、渲染与合成&#xff0c;再推流到直播平台的一种直播技术。尽管这种技术早已被影视工业所采用&#xff0c;但在全民化进程中却是困难重重&#xff0c;面临…...

编程日记 2023/4/16 10:11:00

初谈 ChatGPT

引子 最近&#xff0c;小编发现互联网中的大 V 突然都在用 ChatGPT 做宣传&#xff1a;“ChatGPT不会淘汰你&#xff0c;能驾驭ChatGPT的人会淘汰你”、“带领一小部分人先驾驭ChatGPT”。 确实&#xff0c;ChatGPT这个新生事物&#xff0c;如今被视为蒸汽机、电脑、iPhone 般的…...

编程日记 2023/4/16 10:05:58

JAVA练习103-螺旋矩阵

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 4月9日练习内容 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目-螺…...

编程日记 2023/4/16 10:00:56

RecvByteBufAllocator内存分配计算

虽然了解了整个内存池管理的细节&#xff0c;包括它的内存分配的具体逻辑&#xff0c;但是每次从NioSocketChannel中读取数据时&#xff0c;应该分配多少内存去读呢&#xff1f; 例如&#xff0c;客户端发送的数据为1KB , 应该分配多少内存去读呢&#xff1f; 例如&#xff1a;…...

编程日记 2023/4/16 9:55:55

图数据结构与算法

什么是图数据的结构 图是由顶点和边组成的非线性数据结构。顶点有时也称为节点，边是连接图中任意两个节点的线或弧。更正式地说，图由一组顶点 ( V ) 和一组边 ( E ) 组成。该图由 G(E, V) 表示。 图的组成部分 顶点：顶点是图的基本单位。有时，顶点也称为顶点或节点。每个节…...

编程日记 2023/4/16 9:50:53

科普:c语言与C++的区别

C语言和C语言是两种广泛使用的编程语言&#xff0c;尽管它们非常相似&#xff0c;但它们在某些方面也存在不同之处。本文将详细介绍C语言和C语言的区别。 1. 编程范式 C语言是一种过程式编程语言&#xff0c;它的设计目标是为了编写操作系统和其他系统级编程。C语言是一种面向…...

编程日记 2023/4/16 9:45:52

IDEA插件开发：集成Nunchaku-flux-1-dev实现代码注释自动图解

IDEA插件开发&#xff1a;集成Nunchaku-flux-1-dev实现代码注释自动图解 1. 引言 作为一名Java开发者&#xff0c;你是否曾经面对过这样的困境&#xff1a;接手一个复杂的遗留系统&#xff0c;代码量庞大但注释稀少&#xff0c;逻辑关系错综复杂&#xff0c;光是理解代码执行…...

编程新知 2026/3/31 11:15:09

解锁3大自由：5分钟掌握的音乐格式解放工具

解锁3大自由&#xff1a;5分钟掌握的音乐格式解放工具 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 在数字音乐时代&#xff0c;我们却常常面临这样的困境&#xff1a;下载的音乐被限制在特定播放器中&#xff0c;就像拥有一本精美…...

编程新知 2026/3/31 10:26:38

【课后习题答案】SystemVerilog for Verification 3rd Edition第五章（绿皮书第三版）

1 解答class MemTrans;// a. 8位logic类型的data_inlogic [7:0] data_in;// b. 4位logic类型的addresslogic [3:0] address;// c. 打印data_in和address的void函数function void print();$display("data_in 0x%h, address 0x%h", data_in, address);endfunction// …...

编程新知 2026/3/31 10:12:23

工业视觉检测避坑指南：CogBlobTool阈值设置5大常见错误及解决方案

工业视觉检测避坑指南&#xff1a;CogBlobTool阈值设置5大常见错误及解决方案 在工业视觉检测领域&#xff0c;斑点检测&#xff08;Blob Analysis&#xff09;是最基础也最关键的环节之一。作为Cognex VisionPro套件中的核心工具&#xff0c;CogBlobTool凭借其强大的图像分割能…...

编程新知 2026/3/31 9:18:01

基于SpringBoot+Vue的月度员工绩效考核管理系统管理系统设计与实现【Java+MySQL+MyBatis完整源码】

摘要 现代企业管理中&#xff0c;绩效考核是提升员工工作效率、优化人力资源配置的重要手段。传统的绩效考核多依赖纸质记录或简单的电子表格&#xff0c;存在数据易丢失、统计效率低、反馈周期长等问题。随着信息化技术的发展&#xff0c;企业亟需一套高效、精准的绩效考核管理…...

编程新知 2026/3/31 8:23:38

Qwen3.5-9B自动化：GitHub Actions触发模型推理+PR评论生成

Qwen3.5-9B自动化&#xff1a;GitHub Actions触发模型推理PR评论生成 1. 项目概述 Qwen3.5-9B是一个拥有90亿参数的开源大语言模型&#xff0c;具备强大的逻辑推理、代码生成和多轮对话能力。最新版本还支持多模态理解&#xff08;图文输入&#xff09;和长达128K tokens的上…...

编程新知 2026/3/31 8:01:26

永磁同步电机这玩意儿现在工业上用得是真多，今天咱们来点硬核的，手搓个IPMSM的数学模型。先别急着关页面，代码实现和调试坑点都给你备好了

IPMSM数学模型&#xff0c;模拟电机对不同输入的响应&#xff0c;包含速度环和电流环&#xff0c;输出电流转速和转矩。先甩几个核心方程镇楼。d-q轴电压方程&#xff1a; def voltage_equation(t, state, Vd, Vq):id, iq, w_r, theta stateVd ... # 这里放你的控制算法输出V…...

编程新知 2026/3/31 6:28:41

千问3.5-2B实战教程：将网页交互结果接入企业微信机器人，实现图片秒级响应

千问3.5-2B实战教程&#xff1a;将网页交互结果接入企业微信机器人&#xff0c;实现图片秒级响应 1. 项目背景与价值 在日常工作中&#xff0c;我们经常需要快速处理大量图片信息。比如电商团队需要审核商品主图&#xff0c;市场部门需要分析竞品海报&#xff0c;客服团队要识…...

编程新知 2026/3/31 4:33:15

从零实践：个人电脑上运行26M小参数GPT的预训练、微调与推理全流程指南

1. 为什么选择26M小参数GPT 在个人电脑上训练大语言模型听起来像天方夜谭&#xff0c;但26M参数的GPT模型让这成为可能。这个参数规模比主流的数十亿参数模型小了上千倍&#xff0c;但保留了GPT的核心架构和训练流程。我实测下来&#xff0c;在消费级显卡&#xff08;如RTX 306…...

编程新知 2026/3/31 4:27:13

ChatGPT在代码安全实战中的5个隐藏技巧：从漏洞检测到恶意软件分析

ChatGPT在代码安全实战中的5个隐藏技巧&#xff1a;从漏洞检测到恶意软件分析 当开发者第一次听说ChatGPT能帮忙写代码时&#xff0c;大多数人想到的可能是自动补全函数或生成简单脚本。但很少有人意识到&#xff0c;这个看似普通的对话AI&#xff0c;正在成为代码安全领域的&q…...

编程新知 2026/3/31 1:45:16