CSS的样式计算过程

server/2024/12/25 21:00:53/

先看一段代码, a标签是什么颜色?

<html><head><title>CSS</title><style>.wrapper {color: red;}</style></head><body><div class="wrapper"><a href="#">我是一个a标签</a></div></body>
</html>

答案: 蓝色

 为什么我已经定义了父元素为红色, a标签不是应该继承父元素的样式为红色吗?

这个时候就引出了一个概念:样式的计算过程

样式的计算过程分为四步:

1. 确认已经声明的值

2. 确认重叠的值

3.确认继承的值

4.使用浏览器默认样式

我们以标签为例,逐步来看这几步骤是如何进行的!

第一步:如果元素有已经声明的值的话,就直接使用已声明的值,下面的步骤直接省略!

第二步:用户样式表 > 浏览器样式表

第三步:  继承样式

第四步:使用默认样式

案例中的a标签由于有浏览器的默认样式,所以到第一个就计算出来样式了!所以就是蓝色!


http://www.ppmy.cn/server/152850.html

相关文章

【漏洞-Oracle】未设置口令复杂度校验、密码有效期

1.场景描述 三方漏洞扫描&#xff1a; 2.详细描述 安全问题&#xff1a;Oracle未设置系统的口令复杂度校验、密码有效期。 危害分析结果&#xff1a;存在使用口令被恶意用户猜测获得&#xff0c;合法用户身份被仿冒&#xff0c;导致系统被非授权访问的可能性。 整改建议&…

41.在Vue3中使用OpenLayers实现读取WKT数据,输出GML、Polyline、GeoJSON

引言 随着地理信息系统&#xff08;GIS&#xff09;应用的不断发展&#xff0c;Web地图和地理数据的处理已经成为许多前端开发者的重要任务之一。在Vue 3框架中结合OpenLayers进行地理数据的可视化展示是一种常见的解决方案。OpenLayers是一个开源的Web地图API&#xff0c;支持…

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…

Python 标准库:string——字符串操作

文章目录 模块介绍主要常量主要类- Formatter- Template 主要函数- capwords()- Template.substitute()- Formatter.format() 模块介绍 string 模块提供了许多与字符串操作相关的常量和函数。它主要用于处理字符串&#xff0c;包括字符集合、格式化操作和其他与字符串相关的功…

【Nginx-4】Nginx负载均衡策略详解

在现代Web应用中&#xff0c;随着用户访问量的增加&#xff0c;单台服务器往往难以承受巨大的流量压力。为了解决这一问题&#xff0c;负载均衡技术应运而生。Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;提供了多种负载均衡策略&#xff0c;能够有效地将请求分…

Django连接mysql数据库报错ModuleNotFoundError: No module named ‘MySQLdb‘

是不是很诧异明明pymysql库也安装了&#xff0c;setting.py文件也配置好了为啥报错 因为选择使用pymysql&#xff0c;还需要在 Django 项目的设置中添加以下代码&#xff0c;让 Django 使用 pymysql作为 MySQL 数据库适配器&#xff1a; import pymysqlpymysql.install_as_My…

Centos创建共享文件夹拉取文件

1.打开VMware程序&#xff0c;鼠标右检你的虚拟机&#xff0c;打开设置 2.点击选项——共享文件夹——总是启用 点击添加&#xff0c;设置你想要共享的文件夹在pc上的路径&#xff08;我这里已经添加过了就不加了&#xff09; 注意不要中文&#xff0c;建议用share&#xff0c…

【编辑器扩展】打开持久化路径/缓存路径/DataPath/StreamingAssetsPath文件夹

代码 [MenuItem("Assets/Open Explorer/PersistentDataPath")]public static void OpenPersistentDataPath(){Application.OpenURL(Application.persistentDataPath);}[MenuItem("Assets/Open Explorer/DataPath")]public static void OpenDataPath(){Appl…