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

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

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

相关文章

autojs-练手-视频号点赞(进阶版)

注释很详细,直接上代码 较初阶版新增内容 1. 简单但好用的ui界面 为方便大家参考,ui界面的模板单独拿出来了 ui界面模板 2. opencv图像识别 3. 需加载情况特殊处理(防卡壳) 4. 增加自动判断是否已点赞的情况 源码部分 // 启用…

HarmonyOS4.0从零开始的开发教程14Web组件的使用

HarmonyOS(十二)Web组件的使用 1 概述 相信大家都遇到过这样的场景,有时候我们点击应用的页面,会跳转到一个类似浏览器加载的页面,加载完成后,才显示这个页面的具体内容,这个加载和显示网页的…

智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.水循环算法4.实验参数设定5.算法结果6.参考文…

拓扑排序实现循环依赖判断 | 京东云技术团队

本文记录如何通过拓扑排序,实现循环依赖判断 前言 一般提到循环依赖,首先想到的就是Spring框架提供的Bean的循环依赖检测,相关文档可参考: https://blog.csdn.net/cristianoxm/article/details/113246104 本文方案脱离Spring Be…

无需公网IP联机Minecraft,我的世界服务器本地搭建教程

目录 前言 1.Mcsmanager安装 2.创建Minecraft服务器 3.本地测试联机 4. 内网穿透 4.1 安装cpolar内网穿透 4.2 创建隧道映射内网端口 5.远程联机测试 6. 配置固定远程联机端口地址 6.1 保留一个固定TCP地址 6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 8.总…

Vue 中 v-model 的修饰符

lazy 修饰符&#xff1a;将 v-model 改为失去焦点后更新数据。 number 修饰符&#xff1a;将 v-model 数据转为数字类型。 trim 修饰符&#xff1a;去除 v-model 数据中的首尾空格。 语法格式&#xff1a; // lazy 修饰符 <input v-model.lazy"数据"> // nu…

靠谱的车- 华为OD统一考试(C卷)

靠谱的车- 华为OD统一考试&#xff08;C卷&#xff09; OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 程序员小明打了一辆出租车去上班。出于职业敏感&#xff0c;他注意到这辆出租车的计费表有点问题&#xf…

【JNA与C++基本使用示例】

JNA中java与C使用注意事项和代码示例 JNA关系映射表使用案列注意代码示例C代码java代码 JNA关系映射表 使用案列 注意 JNA只支持C方式的dll使用C的char* 作为返回值时&#xff0c;需要返回的变量为malloc分配的地址C的strlen函数只获得除/0以外的字符串长度 代码示例 C代码…

基于PaddleNLP的深度学习对文本自动添加标点符号(一)

前言 目前以深度学习对文本自动添加标点符号研究很少&#xff0c;已知的开源项目并不多&#xff0c;详细的介绍就更少了&#xff0c;但对文本自动添加标点符号又在古文识别语音识别上有重大应用。 基于此&#xff0c;本文开始讲解基于PaddleNLP的深度学习对文本自动添加标点符号…

WT2003H4-16S语音芯片:扭蛋机新潮音乐,娱乐升级无限

在扭蛋机的乐趣世界里&#xff0c;唯创知音的WT2003H4-16S语音芯片&#xff0c;作为MP3音乐解码播放IC&#xff0c;为扭蛋机带来了更智能、更富有趣味的音乐体验&#xff0c;为玩家打开了娱乐升级的无限可能。 1. 机启音乐&#xff0c;欢迎扭蛋之旅 扭蛋机启动时&#xff0c;…

鸿蒙开发之状态管理@Prop和@Link

一、用法 在父子组件需要进行数据同步的时候&#xff0c;可以通过Prop和Link装饰器来做到。在父组件中用State装饰&#xff0c;在自组件中用Prop或Link装饰。 结论&#xff1a;Prop用于子组件只监听父组件的数据改变而改变&#xff0c;自己不对数据改变 Link用于子组件与父组…

Proxmox VE 安装 OpenWrt 配置旁路由教程

话不多说&#xff0c;本篇文章将记录如何在 Proxmox VE 环境通过虚拟机安装 OpenWrt 配置旁路由的过程&#xff0c;仅做参考。 PVE 创建虚拟机 名称随意&#xff0c;GuestOS 选择 Linux&#xff0c;不使用任何 iso 镜像。&#xff08;记住你的 VMID&#xff09; 清空将要创建…

【Linux】CentOS部分命令

目录 1.文件处理命令2.文件查看命令3.目录查看命令 1.文件处理命令 &#xff08;1&#xff09;.创建文件 mkdir //创建文件夹 touch //创建文件 echo > filename //创建一个空文件 ↑↓ echo "" > filename …

机器学习---Adaboost算法

1. Adaboost算法介绍 Adaboost是一种迭代算法&#xff0c;其核心思想是针对同一个训练集训练不同的分类器&#xff08;弱分类器&#xff09;&#xff0c;然 后把这些弱分类器集合起来&#xff0c;构成一个更强的最终分类器&#xff08;强分类器&#xff09;。Adaboost算法本身…

C语言的第一个HelloWorld程序

相信进入编程世界的人&#xff0c;都知道入门的第一个程序是"Hello, World!"&#xff0c;那就怀念一下过去&#xff0c;给想入门你一点启发。 第一个C程序通常是打印"Hello, World!"&#xff0c;用于演示C语言的基本语法和结构。 #include <stdio.h&g…

Qt 线程

&#x1f4a1; 进度条显示拷贝进度&#xff08;verson 1&#xff09; 窗口上放置一个按钮和一个进度条部件&#xff0c;点击按钮&#xff0c;进行拷贝操作 —— 打开对话框选择源文件&#xff0c;然后再打开一个对话框 选择 目标文件存放位置和名称。拷贝过程中进度条显示当前…

十三、YARN资源分配调用

1、为什么要先学习YARN组件&#xff1f; 在Hadoop文件系统中&#xff0c;YARN作为Hadoop系统的第三大组件&#xff0c;其中&#xff0c;第二大组件MapReduce组件是基于YARN运行的&#xff0c;即没有YARN无法运行MapReduce程序&#xff0c;所以需要同时学习YARN。 2、YARN &…

使用elasticsearch-dump工具备份ES数据库

ES数据库版本 elasticsearch7.16.0 备份工具 elasticsearch-dump &#xff08;docker 版&#xff09; 如果需要设置定时任务&#xff0c;需要使用使用elasticsearch-dump编译的二进制文件&#xff0c;需要nodejs、npm环境。 Docker 安装 docker pull elasticdump/elastics…

Day58力扣打卡

打卡记录 下一个更大元素 IV&#xff08;单调栈 x2&#xff09; 链接 class Solution:def secondGreaterElement(self, nums: List[int]) -> List[int]:ans [-1] * len(nums)s []t []for i, x in enumerate(nums):while t and nums[t[-1]] < x:ans[t.pop()] x # t…

Fabric建链docker-compose方式(客户端与节点主机分离+Fabric CA server容器化)

目录 一、客户端准备1.1、准备链目录和配置文件1.2、设置环境变量1.3、启动fabric-ca-server1.4、登记ca的admin用户 二、准备组织org12.1、准备组织目录2.2、生成组织org1的msp配置 三、准备peer0节点3.1、注册peer03.2、注册peer组织org1的user3.3、注册peer组织org1的admin3…