CSS的三大特性(层叠性、继承性、优先级---------很重要)

news2024/11/23 13:16:16

CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。

  • 层叠性

场景:相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突 的问题

原则:

 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

 样式不冲突,不会层叠

层叠性:在条件相同的情况下会,前面的样式会覆盖前面的样式

列如:

最后文字会显示成粉色

  • 继承性

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

特点:

 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
 继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

列如

p标签没有对文字颜色进行设置,但div设置了,而div是p标签的父亲,所以就继承了div的属性,最后显示成粉色

行高的继承性

 行高可以跟单位也可以不跟单位
 如果子元素没有设置行高,则会继承父元素的行高为 1.5
 此时子元素的行高是:当前子元素的文字大小 * 1.5 
 body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

  • 优先级

当同一个元素指定多个选择器,就会有优先级的产生。

 选择器相同,则执行层叠性

 选择器不同,则根据选择器权重执行

注意:

1. 权重是有4组数字组成,但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
5. 继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。

列如

 div ul li ------> 0,0,0,3
 .nav ul li ------> 0,0,1,2
 a:hover -----—> 0,0,1,1
 .nav a ------> 0,0,1,1

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

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

相关文章

如何从eureka-server上进行服务发现,负载均衡远程调用服务

在spring cloud的maven的pom文件中添加eureka-client的依赖坐标 <!--eureka-client依赖--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependen…

Linux(20):软件安装:原始码与 Tarball

开放源码的软件安装与升级 在Windows系统上面的软件都是一模一样的&#xff0c;【无法修改该软件的源代码】&#xff0c;因此&#xff0c;万一想要增加或者减少该软件的某些功能时&#xff0c;无能为力。。。 Linux 上面的软件几乎都是经过 GPL 的授权&#xff0c;所以每个软件…

99基于matlab的小波分解和小波能量熵函数

基于matlab的小波分解和小波能量熵函数&#xff0c;通过GUI界面导入西储大学轴承故障数据&#xff0c;以可视化的图对结果进行展现。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 99小波分解和小波能量熵函数 (xiaohongshu.com)https://www.xiaohongshu.co…

提升数据可视化:拖拽编辑自动汇总,树形数据表格展示新方式

本文由葡萄城技术团队发布。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 树形结构是一种非常常见的数据结构&#xff0c;它由一组以层次关系排列的节点组成。树的结构类似于自然界中的一…

如何使用内网穿透实现iStoreOS软路由R4S公网远程访问局域网电脑桌面

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 简介一、配置远程桌面公网地址二、家中使用永久固定地址…

【数据库】基于有效性确认的并发访问控制原理及调度流程,乐观无锁模式,冲突较少下的最优模型

使用有效性确认的并发控制 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专…

orb-slam2学习总结

目录 视觉SLAM 1、地图初始化 2、ORB_SLAM地图初始化流程 3、ORB特征提取及匹配 1、对极几何 2、对极约束 &#xff08;epipolar constraint&#xff09; 3、基础矩阵F、本质矩阵E 5、单目尺度不确定性 6、单应矩阵&#xff08;Homography Matrix&#xff09; 6.1 什么是单应矩…

没有明确的报错信息,阿里云国际版Windows服务器无法远程连接

在远程连接失败时&#xff0c;如果您没有收到系统返回的报错信息&#xff0c;并且ECS实例是运行中的状态&#xff0c;然后再根据以下步骤进行排查&#xff1a; 步骤一&#xff1a;使用阿里云Workbench工具测试远程登录 步骤二&#xff1a;检查是否有收到黑洞通知 步骤三&…

Zygote 进程启动过程

首语 在Android系统中&#xff0c;DVM(Dalvik虚拟机)和ART、应用程序进程以及运行系统的关键服务的SystemServer进程都是由Zygote进程创建的&#xff0c;也可以将其称之为孵化器&#xff0c;它通过fork(复制进程)的形式来创建应用程序进程和SystemServer进程。 Zygote进程是在…

AnythingLLM:基于RAG方案构专属私有知识库(开源|高效|可定制)

一、前言 继OpenAI和Google的产品发布会之后&#xff0c;大模型的能力进化速度之快令人惊叹&#xff0c;然而&#xff0c;对于很多个人和企业而言&#xff0c;为了数据安全不得不考虑私有化部署方案&#xff0c;从GPT-4发布以来&#xff0c;国内外的大模型就拉开了很明显的差距…

Oracle(2-17) RMAN Maintenance

文章目录 一、基础知识1、Retention Policy 保留政策2、Recovery Window - Part 1 恢复窗口-第1部分3、Cross Checking 交叉检查4、The CROSSCHECK Command CROSSCHECK命令5、OBSOLETE VS EXPIRED 过时与过期6、Deleting Backups and Copies 删除备份和副本7、The DELETE Comma…

极狐GitLab CI/CD 变量黑魔法之自定义变量

极狐GitLab CI/CD 变量是指一系列的环境变量&#xff0c;用来帮助我们控制 CI/CD Job 或 Pipeline 的行为&#xff0c;存储一些可以复用的信息&#xff0c;避免在 .gitlab-ci.yml 中形成硬编码。 极狐GitLab CI/CD 变量分为预定义变量(predefined CI/CD variables) 和 自定义变…

图论-并查集

并查集(Union-find Sets)是一种非常精巧而实用的数据结构,它主要用于处理一些不相交集合的合并问题.一些常见的用途有求连通子图,求最小生成树Kruskal算法和最近公共祖先(LCA)等. 并查集的基本操作主要有: .1.初始化 2.查询find 3.合并union 一般我们都会采用路径压缩 这样…

flex布局,换行的元素上下设置间距

要生成的效果图如下&#xff1a; display:flexflex-direction: row;flex-wrap: wrap;当我们使用弹性盒子布局后&#xff0c;默认元素是没有外边距的&#xff0c;紧挨着样式就有点丑&#xff0c;如果想使换行后&#xff0c;元素的外边距有个距离&#xff0c;可以用如下方法解决…

Apache Flink(十二):Flink集群部署-Flink On Yarn

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录

Python学习笔记(四):函数的定义、函数的返回值、None类型、函数说明文档、函数的嵌套调用、局部变量、全局变量、global关键字

目录 一、函数介绍 1. 函数是&#xff1a; 2. 使用函数的好处是&#xff1a; 二、函数的定义&#xff1a; 三、函数的参数 1.传入参数的功能是&#xff1a; 2.函数的传入参数 - 传参定义 3.注意事项&#xff1a; 4.练习&#xff1a;测量体温 四、函数的返回值 1.函数…

Axure元件基本介绍进阶

Axure元件基本介绍进阶 1.Axure元件基本介绍1.在 Axure 中&#xff0c;元件是构建原型的基本构成单元&#xff0c;能够帮助设计师快速创建、重复使用和管理设计元素。以下是 Axure 中元件的基本介绍&#xff1a;1.基本元件&#xff1a; 2.基本元件的使用一.【举例说明】积木&am…

基于 Game Object Conversion 和 SubScene 的 DOTS 开发工作流(干货满满!)

(译前言: Unity DOTS提出了一套全新的开发技术栈, 但目前少有精讲如何结合现有工作流进行开发的资料, 外网 这篇文章 (Game Object Conversion and SubScene) 详细解构了基于 GameObject 和 Subscene 的工作流程和原理, 要求读者对 DOTS/ECS 有基本的了解, 虽然非常之长, 但值得…

8 Buildroot 根文件系统构建

一、根文件系统简介 根文件系统一般也叫做 rootfs&#xff0c;这个是属于 Linux 内核的一部分。 根文件系统首先是一种文件系统&#xff0c;该文件系统不仅具有普通文件系统的存储数据文件的功能&#xff0c;但是相对于普通的文件系统&#xff0c;它的特殊之处在于&#xff0c;…

flutter的ListView和SingleChildScrollView有什么区别?他们的使用场景有什么不一样?

文章目录 简介ListViewSingleChildScrollView使用场景的不同 简介 ListView和SingleChildScrollView都是在Flutter中用于处理滚动内容的组件&#xff0c;但它们有一些关键的区别。 ListView 多个子元素&#xff1a; ListView是一个滚动的可滚动组件&#xff0c;通常用于包含多…