css持续学习

news2024/11/16 11:42:46

一、样式层叠

当一个css样式发生冲突时,比如多处给一个字体设置了不同的颜色,这个时候就需要样式层叠了,它会进行三种比较

  • 比较重要性
    重要性从高到低:
    1.带有 important 的作者样式(作者样式就是开发者写的样式)
    2.带有 important 的默认样式(默认样式就是浏览器的默认样式)
    3.作者样式
    4.默认样式
  • 比较特殊性
    特殊性也被称为权重,由四位数组成(0,0,0,0),不能进位,由左向右比较,只有当前位相同的时候,才会比较后一位
    在这里插入图片描述
  • 比较源次序
    比较样式在代码中的顺序,后面的会覆盖前面的,当然也要搞清楚比较哪里的顺序
<!-- 不是比较这里的顺序 -->
<div class="home nav">111</div> 
//是比较这里的顺序,可以测试一下,你会发现字体颜色为red
.nav{
	color:pink
}
.home{
	color:red
}

**注意:**这三个比较也是顺序比较,只有当前比较是一样的时候,才会进行下一个比较,比如比较重要性时,都是作者样式,才会比较特殊性,如果一个是作者样式,一个是默认样式,就是默认样式的特殊性更高,一样会使用作者样式,因为并没有到比较特殊性的阶段

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1868219.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【渗透工具】Nuclei POC—整合全网Nuclei的漏洞POC

1. 免责申明 本公众号的技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信…

创纪录!沃飞长空完成新一轮融资,实力获资方认可

作为全球竞逐的战略性新兴产业&#xff0c;今年首次写入政府工作报告的“低空经济”热度正持续提升&#xff0c;在政策、产业等多个层面均有重大突破。行业的飞速发展也吸引了投资界的目光&#xff0c;越来越多资本正投向低空经济。 近期&#xff0c;国内领先的低空出行企业吉…

CSS Grid网格布局

一、前言 二、Grid布局 1、基本介绍 2、核心概念 &#xff08;1&#xff09;网格容器 &#xff08;2&#xff09;网格元素 &#xff08;3&#xff09;网格列 &#xff08;4&#xff09;网格行 &#xff08;5&#xff09;网格间距 &#xff08;6&#xff09;网格线 三…

UE4_材质_水涟漪、水深制作_Ben教程

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 效果图如下&#xff1a; 创建水材质的教程&#xff0c;首先需要外出收集一些参考&#xff0c;看一看你将要做的事情很重要&#xff0c;确定将要模仿物体的关键属性&#xff0c;从这…

基于Java中的SSM框架实现后台资金管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现后台资金管理系统演示 摘要 互联系统的技术在如今的社会中&#xff0c;应用的越来越广泛&#xff0c;通过互联系统我们可以更方便地进行办公&#xff0c;也能够在系统上就能处理很多日常的事务。通过互联系统的发展和使用&#xff0c;让更多的人&#…

Python将Word文档转换为图片(JPG、PNG、SVG等格式)

将Word文档以图片形式导出&#xff0c;既能方便信息的分享&#xff0c;也能保护数据安全&#xff0c;避免被二次编辑。文本将介绍如何使用 Spire.Doc for Python 库在Python程序中实现Word到图片的批量转换。 目录 Python 将Word文档转换为JPG、JPEG、PNG、BMP等图片格式 Py…

Maven高级的聚合和继承

聚合和继承 我们的项目已经从以前的单模块&#xff0c;变成了现在的多模块开发。项目一旦变成了多模块开发以后&#xff0c;就会引发一些问题&#xff0c;在这一节中我们主要会学习两个内容聚合和继承&#xff0c;用这两个知识来解决下分模块后的一些问题。 3.1 聚合 分模块开…

腾讯云CVM,CentOS8系统下部署Java-Web项目步骤详解

在CVM中部署项目首先要配置好JDK,Tomcat,Mysql(这里以Tomcat和Mysql为例)。部署JDK和Tomcat的步骤可以参考 CentOS7系统下部署tomcat,浏览器访问localhost:8080/_不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江河。-CSDN博客 我这里从Mysql的安装和设…

高晓松音频全集百度云,高晓松百度云,百度网盘

讲座通常围绕某一特定主题或领域展开&#xff0c;内容具有针对性和专业性。这使得听众能够在短时间内集中精力&#xff0c;深入了解某一领域的最新研究成果或实践经验。 讲座通常由具有丰富知识和经验的专家学者主讲&#xff0c;他们能够系统地介绍某一领域的背景、现状和发展趋…

【项目管理体系】代码评审规范

1完整性检查 2一致性检查 3正确性检查 4可预测性检查 5健壮性检查 6结构性检查 7可追溯性检查 8可理解性检查 9可验证性检查 软件开发全套资料获取&#xff1a;&#xff08;本文末个人名片直接获取&#xff09; 软件产品&#xff0c;特别是行业解决方案软件产品不同于一般的商品…

数学建模 —— 矩阵的运算(上)

目录 调用函数运算 sum : 求和函数 prod : 求乘积函数(product) cumsum : 计算累积和(cumulative sum) diff : 计算差分(difference) mean : 计算平均值 (average) median : 计算中位数 mode : 计算众数 var : 计算方差 (variance) std : 计 算 标 准 差 (standard d…

CST电磁仿真实践:开路半波长同轴谐振器

许多微波技术初学者得知有现成的软件能够求解麦克斯韦方程组时&#xff0c;内心感到非常高兴&#xff0c;毕竟除了数学专家&#xff0c;不是所有人都能熟练掌握这方面的技术。尤其是&#xff0c;当看到CST电磁仿真软件可以生成美观的电磁场分布彩图时&#xff0c;他们对CST电磁…

mac app应用程序如何自定义图标, 更换.app为自己喜欢的图标或者图片 详细图文讲解

在mac系统中&#xff0c;我们可以对任何的app应用程序更换或者自定义图标&#xff0c; 这个图标可以是拥有的app的图标&#xff0c;或者是你自己制作的 x.icns 图标 或者是 任意的图片&#xff0c; 建议大小512x512 。 自定义图标方法如下&#xff1a; 1. 更换为已有app的图标…

深入剖析JavaScript的原型及原型链

什么是JavaScript的原型&#xff1f; 原型是函数上的一个属性&#xff0c;它定义了构造函数制造的对象的公共祖先 原型的主要作用在于实现对象之间的属性和方法共享&#xff0c;从而节省内存空间&#xff0c;提高代码的效率 我们通过一段代码来接讲解&#xff0c;通过购买小米…

掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)

前言 众所周知&#xff0c;在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x&#xff0c;同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。…

OpenFAST软件中linux-gnu,linux-intel,macos-gnu,vtk,windows-intel文件的作用

在OpenFAST中&#xff0c;5MW_Land_DLL_WTurb目录下的这五个文件夹分别有不同的用途&#xff0c;主要是为了支持不同操作系统和平台的编译和仿真工作。以下是每个文件夹的总结及其作用&#xff1a; linux-gnu 作用&#xff1a;包含用于GNU编译器套件&#xff08;GCC&#xff09…

私有化部署 Dify 并快速搭建 AI 应用

Dify介绍 Dify 是一个开源的 LLM 应用开发平台。其直观的界面结合了 AI 工作流、RAG 管道、Agent、模型管理、可观测性功能等&#xff0c;让您可以快速从原型到生产。以下是其核心功能列表&#xff1a; 1. 工作流: 在画布上构建和测试功能强大的 AI 工作流程&#xff0c;利用…

大数据之路 读书笔记 Day2

大数据之路 读书笔记 Day2 日志采集——浏览器的页面采集 一、分类 #mermaid-svg-ar0WySJJTNk7KvqN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ar0WySJJTNk7KvqN .error-icon{fill:#552222;}#mermaid-svg-ar0…

keil仿真,查看函数执行时间和执行次数

Execution Profiler执行档案器 The Execution Profiler records timing and execution statistics about instructions for the complete program code. To view the values in the Editor or Disassembly Window, use Show Time or Show Calls from the menu Debug — Executi…

IND83081芯片介绍(一)

一、芯片介绍 IND83081是indiemicro推出的一款高性能的汽车矩阵LED照明控制器&#xff0c;集成了四个子模块&#xff0c;每个子模块包含三个串联的MOSFET开关&#xff0c;每个开关均可通过12位PWM内部信号控制&#xff0c;可配置的上升和下降速率及相位移以实现精确控制&#x…