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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

nodejs微信小程序+python+PHP的外卖数据分析-计算机毕业设计推荐django

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

Ubuntu编译文件安装SNMP服务

net-snmp源码下载 http://www.net-snmp.org/download.html 编译步骤 指定参数编译 ./configure --prefix/root/snmpd --with-default-snmp-version"2" --with-logfile"/var/log/snmpd.log" --with-persistent-directory"/var/net-snmp" --wi…

应用程序映射的 5 个安全优势

现代企业依靠无数的软件应用程序来执行日常运营。这些应用程序相互连接并协同工作以提供所需的服务。了解这些应用程序如何相互交互以及底层基础设施对于任何组织都至关重要。这就是应用程序映射概念的用武之地。 顾名思义,应用程序映射是创建应用程序架构&#xf…

[NAND Flash 3.2] 3D NAND 工艺与发展前沿

依公知及经验整理,原创保护,禁止转载。 专栏 《深入理解NAND Flash》 全文 6200 字,​2023.12.12 更新 1. 导论 1.1 何为 3D NAND? 3D NAND, 也叫做 Sumsung V-NAND, 是一种高密度闪存。 以前,把NAND闪存颗粒,直接…

互斥锁的原理

互斥锁(Mutex,全称Mutual Exclusion)是一种同步机制,用于确保在任意时刻,只有一个线程可以访问共享资源,从而防止数据竞争和不一致性。互斥锁的基本思想是在进入临界区之前,先获取锁&#xff1b…

Python和Beautiful Soup爬虫助力提取文本内容

大家好,网络爬虫是一项非常抢手的技能,收集、分析和清洗数据是数据科学项目中最重要的部分。今天介绍如何从链接中爬取高质量文本内容,我们使用迭代,从大约700个链接中进行网络爬取。如果想直接跳转到代码部分,可以在下…

【JVM从入门到实战】(四)类的生命周期

什么是类的生命周期 类的生命周期描述了一个类加载、连接、初始化、使用、卸载的整个过程 一个类完整的生命周期如下: 加载阶段 加载阶段第一步是类加载器根据类的全限定名通过不同的渠道以二进制流的方式获取字节码信息。 程序员可以使用Java代码拓展的不同的渠道…

计算机视觉 基于视频识别场景了解GluonCV深度学习工具包

一、简述 GluonCV 提供计算机视觉领域最先进 (SOTA) 深度学习算法的实现。它旨在帮助工程师、研究人员和学生快速制作产品原型、验证新想法并学习计算机视觉。 GluonCV: a Deep Learning Toolkit for Computer Vision — gluoncv 0.11.0 documentationhttps://cv.gluon.ai/con…

FFmpeg的AVIOPROBE

文章目录 定义 可能你一直有疑问,ffmpeg的avformat是怎么提前知道码流是编码格式或者容器?恭喜你,看到这里,你找到答案了,在这里,ffmpeg通过这些probe函数来提前获取码流的编码格式。 看到下面的avs2_prob…

单变量线性回归的机器学习代码

本文为学习吴恩达版本机器学习教程的代码整理,使用的数据集为https://github.com/fengdu78/Coursera-ML-AndrewNg-Notes/blob/f2757f85b99a2b800f4c2e3e9ea967d9e17dfbd8/code/ex1-linear%20regression/ex1data1.txt 将数据集和py代码放到同一目录中,使…

多阶段构建:精妙优化Docker镜像大小和性能

在容器化应用的世界中,Docker镜像大小和性能优化是至关重要的。多阶段构建是一项强大的技术,通过精心设计Dockerfile,可以在构建镜像时去除不必要的组件,从而显著减小镜像大小,提高性能。本文章将深入讨论多阶段构建的…

Knowledge Graph知识图谱—9. Data Quality and Linking

9. Data Quality and Linking 9.1 How well are the linked open data in practice? Linked Open Vocabularies(LOV) project – analyze usage of vocabularies 9.2 Quality Linked Data Conformance vs. Quality Conformance: – i.e., following standards and best prac…

语音验证码可以用在哪些方面?

电商行业 由于行业竞争日渐激烈,大多数电商采用补贴用户的营销方式抢占市场,其中,新用户补贴较为常见,随之也衍生出一部分恶意刷单的人群。 而语音验证码在一定程度上保证了一个号码对应一个账号,大大增强了刷单难度…

分页存储管理

页框和页面 将内存空间分为一个个大小相等的分区 (比如:每个分区4KB),每个分区就是一个“页框”(页框页内存块物理块物理页面)。每个页框有一个编号,即“页框号”(页框号页帧号内存块号物理块号物理页号),页框号从0开始。 为了将各个进程的数…

JS基础源码之手写模拟new

JS基础源码之手写模拟new 手写模拟new初步实现最终实现 手写模拟new new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。 我们先看看new实现了哪些功能: function Person (name,age){this.name name;this.age age;this.habit Games;…

2023全国职业院校技能大赛信息安全管理与评估正式赛(模块三CTF)

全国职业院校技能大赛高等职业教育组信息安全管理与评估 \任务书\ 模块三 网络安全渗透、理论技能与职业素养 极安云科专注技能竞赛,包含网络建设与运维和信息安全管理与评估两大赛项,及各大CTF,基于两大赛项提供全面的系统性培训&#xf…

目标检测锚框

目标检测锚框 最开始呢,我们需要先介绍一下框,先学会一下怎么画框 导入所需要的包 from PIL import Image import d2lzh_pytorch as d2l import numpy as np import math import torch展示一下本次实验我们用到的图像,猫狗 d2l.set_figsiz…

智能优化算法应用:基于帝国主义竞争算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于帝国主义竞争算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于帝国主义竞争算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.帝国主义竞争算法4.实验参数设定…

C语言--动态内存【详细解释】

一.动态内存介绍🍗 在C语言中,动态内存分配是指在程序运行时根据需要动态申请内存空间,以便在程序的不同阶段存储和使用数据。动态内存的分配与释放需要一组函数来实现,包括malloc、calloc、realloc和free。 malloc: 函数用于分配…

原创改进|多策略融合的改进蜣螂优化算法

作者在前段时间的一篇文章中介绍过了蜣螂优化算法(dung beetle optimizer,DBO)的原理及实现,该算法是由东华大学沈波教授团队在2022年提出[1],其灵感来自蜣螂的滚球、跳舞、觅食、偷窃和繁殖行为这5种习性,其不同的子种群执行了不…