当前位置: 首页 > 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…...

使用MedGemma 1.5构建医疗知识问答社区的实践

使用MedGemma 1.5构建医疗知识问答社区的实践 1. 引言 医疗行业每天产生海量的专业知识和临床数据,但医生和医学研究者往往难以快速获取精准的医疗信息。传统的医疗知识检索方式效率低下,专业门槛高,让很多医疗工作者在紧急情况下无法及时获…...

C++ Move 构造函数性能影响

C Move构造函数性能影响探析 在现代C编程中,Move构造函数是提升性能的重要工具之一。它通过“窃取”临时对象的资源而非深拷贝,显著减少了不必要的内存分配和数据复制。Move构造函数的性能影响并非总是显而易见,其实际效果取决于多种因素。本…...

终极指南:如何用BongoCat打造你的个性化桌面互动伙伴

终极指南:如何用BongoCat打造你的个性化桌面互动伙伴 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作,每一次输入都充满趣味与活力! 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 你是否厌…...

AI Agent开发实战:基于PyTorch与LangChain构建自主任务执行智能体

AI Agent开发实战:基于PyTorch与LangChain构建自主任务执行智能体 1. 为什么需要自主任务执行智能体 想象一下,你每天要处理几十封邮件、查找各种资料、整理会议纪要,还要写周报。这些重复性工作占据了大量时间,而真正需要创造力…...

AMD Ryzen硬件调试工具实战指南:从问题诊断到系统优化

AMD Ryzen硬件调试工具实战指南:从问题诊断到系统优化 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gi…...

Ollama部署避坑指南:Ubuntu环境下常见错误排查与性能优化

Ollama部署避坑指南:Ubuntu环境下常见错误排查与性能优化 在Ubuntu系统上部署Ollama时,即使是经验丰富的开发者也可能遇到各种"坑"。本文将深入剖析这些常见问题,并提供切实可行的解决方案,帮助您快速定位和解决问题&am…...

SUPER COLORIZER项目实战:使用LaTeX撰写技术报告与效果论文

SUPER COLORIZER项目实战:使用LaTeX撰写技术报告与效果论文 你是不是也遇到过这种情况?辛辛苦苦做完了SUPER COLORIZER的实验,效果数据也整理好了,但一到写报告或论文的时候就头疼。用Word吧,格式调整起来太麻烦&…...

效率提升:基于快马AI定制你的Win11右键菜单一键切换神器

效率提升:基于快马AI定制你的Win11右键菜单一键切换神器 Win11的右键菜单设计让不少用户感到困扰,尤其是从Win10升级过来的老用户。默认的折叠式菜单虽然看起来简洁,但每次都要多点击一次"显示更多选项"才能看到完整功能&#xff…...

AgentCPM模型API接口设计规范与安全防护最佳实践

AgentCPM模型API接口设计规范与安全防护最佳实践 最近在帮几个团队把他们的AgentCPM模型从本地测试环境搬到线上,发现大家普遍有个误区:觉得模型能跑通、接口能调通,就算部署成功了。结果呢,没过多久就遇到了各种问题——有人恶意…...

nlp_structbert_sentence-similarity_chinese-large部署教程:NVIDIA Container Toolkit深度配置

nlp_structbert_sentence-similarity_chinese-large部署教程:NVIDIA Container Toolkit深度配置 1. 项目概述 今天要介绍的是一个特别实用的中文语义相似度分析工具——基于StructBERT-Large模型开发的本地化解决方案。这个工具专门解决中文句子对的语义匹配问题&…...