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

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

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

相关文章:

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

CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。 层叠性 场景:相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突 的问题 原则:  样式冲突&am…...

飞天使-docker知识点10-docker总结

文章目录 docker 知识点汇总docker chatgpt解释学习路线cmd和 ENTRYPOINT 的区别harbor安装漏洞扫描 docker 知识点汇总 docker 基础用法 docker 镜像基础用法 docker 容器网络 docker 存储卷 dockerfile docker仓库 harbor docker-compose docker chatgpt解释学习路线 学习…...

旅游管理虚拟情景实训教学系统演示

首先,虚拟情景实训教学系统为旅游管理专业的学生提供了一个全新的实践平台。在传统的旅游管理教学中,学生往往只能通过理论学习来了解相关知识,而无法亲身实践。虚拟情景实训教学系统则可以通过模拟真实的旅游场景,让学生能够亲身…...

Linux Shell——输入输出命令详解

Shell 输入输出 1. read2. echo3. printf 总结 最近学习了shell相关语法,顺便总结一下关于shell的输入输出命令read和echo、printf。 1. read shell的输入命令,可以从标准控制台中读取一行,并把输入行中的每个字段赋值给指定的变量 可以看到…...

MFC 第一个窗口程序

目录 一、新建Windows桌面应用程序,空项目 二、修改项目属性 三、编写程序 一、新建Windows桌面应用程序,空项目 创建MFCBase.cpp,整个项目很干净 二、修改项目属性 使用多字节编码 使用MFC库 三、编写程序 需要包含 afxwin.h 文件&…...

SQL语句的执行顺序怎么理解?

SQL语句的执行顺序怎么理解? 我们常常会被SQL其书写顺序和执行顺序之间的差异所迷惑。理解这两者的区别,对于编写高效、可靠的SQL代码至关重要。今天,让我们用一些生动的例子和场景来深入探讨SQL的执行顺序。 一、书写顺序 VS 执行顺序 SQ…...

js解析.shp文件

效果图 原理与源码 本文采用的是shapefile.js工具 这里是他的npm地址 https://www.npmjs.com/package/shapefile 这是他的unpkg地址,可以点开查看源码 https://unpkg.com/shapefile0.6.6/dist/shapefile.js 这个最关键的核心问题是如何用这个工具,网上…...

关于“Python”的核心知识点整理大全25

目录 10.3.4 else 代码块、 10.3.5 处理 FileNotFoundError 异常 alice.py 在这个示例中,try代码块引发FileNotFoundError异常,因此Python找出与该错误匹配的 except代码块,并运行其中的代码。最终的结果是显示一条友好的错误消息&#x…...

代码随想录刷题题Day15

刷题的第十五天,希望自己能够不断坚持下去,迎来蜕变。😀😀😀 刷题语言:C Day15 任务 ● 513.找树左下角的值 ● 112. 路径总和 113.路径总和ii ● 106.从中序与后序遍历序列构造二叉树 105.从前序与中序遍历…...

软件设计师——信息安全(一)

📑前言 本文主要是【信息安全】——软件设计师——信息安全的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 &#x1f304…...

git必须掌握:git远程变动怎么解决

如何已经指定了选择分支 那下面的分支名称可以省略 如果远程分支存在变动,通常 git 推送的流程如下: 首先,使用 git fetch 命令从远程仓库获取最新的分支信息和变动。 git fetch然后,可以使用 git merge 或者 git rebase 命令进…...

Python里的时间模块

time 模块 时间表示方式 时间戳 timestamp:表示的是从 1970 年1月1日 00:00:00 开始按秒计算的偏移量UTC(Coordinated Universal Time, 世界协调时)亦即格林威治天文时间,世界标准时间。在中国为 UTC+8 DST(Daylight Saving Time) 即夏令时;结构化时间(struct_time): …...

SCI一区级 | Matlab实现GWO-CNN-GRU-selfAttention多变量多步时间序列预测

SCI一区级 | Matlab实现GWO-CNN-GRU-selfAttention多变量多步时间序列预测 目录 SCI一区级 | Matlab实现GWO-CNN-GRU-selfAttention多变量多步时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-CNN-GRU-selfAttention灰狼算法优化卷积门控循环…...

C#学习相关系列之自定义遍历器

在C#中,自定义遍历器需要实现IEnumerable接口和IEnumerator接口。其中,IEnumerable接口包含一个GetEnumerator方法,该方法返回一个IEnumerator接口的实例,而IEnumerator接口包含Current、MoveNext和Reset方法。 IEnumerable&#…...

WPS没保存关闭了怎么恢复数据?3个方法,完成数据恢复!

“我今天在使用WPS时,突然有点急事出去了一趟,但是我忘记保存文档了,回来之后发现电脑自动关机了,我的文档也没了!这可怎么办呢?有什么办法可以找回这些数据吗?” 在快节奏的工作中,…...

数据结构和算法-最小生成树(prim和krusakal)和最短路径问题(BFS和dijkastra和floyd)

文章目录 最小生成树总览生成树广度优先生成树深度优先生成树最小生成树Prim算法Kruskal算法Prim vs KrusakalPrim的实现Kruskal的实现 小结 最短路径问题单源最短路径问题BFS求无权图的单源最短路径小结Dijkastra算法算法时间复杂度不适用情况 每一对顶点的最短路径问题Floyd算…...

响应者链概述

响应者链 iOS事件的3大类型 Touch Events(触摸事件)Motion Events(运动事件,比如重力感应和摇一摇等)Remote Events(远程事件,比如用耳机上得按键来控制手机) 触摸事件 处理触摸事件的两个步骤 寻找事件的最佳响应者事件的响应在响应链中的传递 寻…...

ShenYu网关Http服务探活解析

文章目录 网关端服务探活admin端服务探活 Shenyu HTTP服务探活是一种用于检测HTTP服务是否正常运行的机制。它通过建立Socket连接来判断服务是否可用。当服务不可用时,将服务从可用列表中移除。 网关端服务探活 以divide插件为例,看下divide插件是如何获…...

基于dockerfile搭建LNMP

组件自定义IP所需组件nginx172.111.0.10nginxwordpressmysql172.111.0.20mysql-5.7.20php172.111.0.30php LNMP介绍 L:Linux平台,操作系统,另外桑组件的运行平台 N:nginx 提供前端页面 M:MySQL,开源关系的…...

基于VGG-16+Android+Python的智能车辆驾驶行为分析—深度学习算法应用(含全部工程源码)+数据集+模型(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 模型构建3. 模型训练及保存1)模型训练2)模型保存 4. 模型生成1)模型导入及调用2)相关代码(1)布局文件(2&#xff…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...

条件运算符

C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...