七、CSS 三大特性(完整详细解析)

**

CSS 三大特性(完整详细解析)

**

1.优先级:
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,

  • 选择器相同,则执行层叠性
  • 选择器不同,就会出现优先级的问题。

1)权重计算公式
a.简单记忆法: 通配符和继承权重为0
标签选择器 权重为1
类(伪类)选择器为10
id 选择器 权重为100
行内样式表 权重为 1000
!important 权重为 无穷大

在这里插入图片描述

2)权重叠加
我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。

就是一个简单的加法计算

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

注意:

  1. 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在 10个div能赶上一个类选择器的情况。

3). 继承的权重为0,不管父元素权重多高,子元素得到的权重都是0
这个不难,但是忽略很容易绕晕。其实,我们修改样式,一定要看该标签有没有被选中。

1) 如果选中了,那么以上面的公式来计权重,谁大听谁的。
2) 如果没有选中,那么权重是0,因为继承的权重为0.

2.CSS层叠性

概念:
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

原则:
样式冲突,遵循的原则是就近原则。哪个样式离结构近,就执行哪个样式。
样式不冲突,则不会层叠

CSS层叠性的执行口诀:长江后浪推前浪,前浪死在沙滩上。

3.CSS继承性

概念:
子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单的理解就是:子承父业。

注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
子元素可以继承父元素的样式有(text-,font-,line-这些元素开头的可以继承,以及color属性)

CSS继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞。

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

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

相关文章

LeetCode 2114. 句子中的最多单词数

文章目录1. 题目2. 解题1. 题目 一个 句子 由一些 单词 以及它们之间的单个空格组成,句子的开头和结尾不会有多余空格。 给你一个字符串数组 sentences ,其中 sentences[i] 表示单个 句子 。 请你返回单个句子里 单词的最多数目 。 示例 1&#xff1…

一、css清除浮动方法学习笔记总结(超详细,简单易懂)

** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co…

LeetCode 2115. 从给定原材料中找到所有可以做出的菜(拓扑排序)

文章目录1. 题目2. 解题1. 题目 你有 n 道不同菜的信息。给你一个字符串数组 recipes 和一个二维字符串数组 ingredients 。 第 i 道菜的名字为 recipes[i] ,如果你有它 所有 的原材料 ingredients[i] ,那么你可以 做出 这道菜。一道菜的原材料可能是 另…

C语言makefile文件详解,makefile讲解

仅供自己学习使用一、Makefile介绍Makefile 或 makefile: 告诉make维护一个大型程序, 该做什么。Makefile说明了组成程序的各模块间的相互 关系及更新模块时必须进行的动作, make按照这些说明自动地维护这些模块。执行make命令时,需要一个 Ma…

二、MySQL连接查询学习笔记(多表连接查询:内连接,外连接,交叉连接详解)

MySQL连接查询(多表连接查询:内连接,外连接,交叉连接详解) 6:多表连接查询 笛卡尔乘积:如果连接条件省略或无效则会出现 解决办法:添加上连接条件连接查询的分类: 1.按…

android 本机号码一键登录,什么是本机号码一键登录?APP本机号码一键登录如何实现?...

三大运营商推出一键登录的服务后,由于其便捷性和安全性都好于传统短信验证码,越来越多的APP注册登录环节都在使用本机号码一键登录验证方式。本文主要介绍了本机号码一键登录特点以及实现方法。一、什么是本机号码一键登录?平时我们填手机号接…

LeetCode 2116. 判断一个括号字符串是否有效(栈)

文章目录1. 题目2. 解题1. 题目 一个括号字符串是只由 ( 和 ) 组成的 非空 字符串。 如果一个字符串满足下面 任意 一个条件,那么它就是有效的: 字符串为 ().它可以表示为 AB(A 与 B 连接),其中A 和 B 都是有效括号字…

NavigationController

前面的一篇文章《iOS开发16:使用Navigation Controller切换视图》中的小例子在运行时,屏幕上方出现的工具栏就是Navigation Bar,而所谓UINavigationItem就可以理解为Navigation Bar中的内容,通过编辑UINavigationItem,…

android studio windows,AndroidStudio的使用(Windows)

演示模式View---Enter presentation mode演示代码快捷提示commondshfita最近修改的文件ctrlshfite代码书签在一行代码处使用F11也可以在navigate--bootmarkPaste_Image.png回退到上一个浏览的地方ctrlaltleft/right快速进入方法内ctrlb查看方法的参数定义commondpPaste_Image.p…

LeetCode 2119. 反转两次的数字

文章目录1. 题目2. 解题1. 题目 反转 一个整数意味着倒置它的所有位。 例如,反转 2021 得到 1202 。反转 12300 得到 321 ,不保留前导零 。 给你一个整数 num ,反转 num 得到 reversed1 ,接着反转 reversed1 得到 reversed2 。 …

三、MySQL子查询学习笔记(标量子查询、列子查询、行子查询、表子查询 详解)

三、MySQL子查询学习笔记 7:子查询 含义: 一条查询语句中又嵌套了另一条完整的select语句,其中被嵌套的select语句,称为子查询或内查询;在外面的查询语句,称为主查询或外查询 分类: 一、按子查…

LeetCode 2120. 执行所有后缀指令(模拟)

文章目录1. 题目2. 解题1. 题目 现有一个 n x n 大小的网格,左上角单元格坐标 (0, 0) ,右下角单元格坐标 (n - 1, n - 1) 。 给你整数 n 和一个整数数组 startPos ,其中 startPos [startrow, startcol] 表示机器人最开始在坐标为 (startrow…

android代理生命周期,了解 Activity 生命周期

当用户浏览、退出和返回到您的应用时,您应用中的在生命周期回调方法中,您可以声明用户离开和再次进入 Activity 时 Activity 的行为方式。例如,如果您正构建流媒体视频播放器,当用户切换至另一应用时,您可能要暂停视频…

LeetCode 2121. 相同元素的间隔之和(前缀和)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始、由 n 个整数组成的数组 arr 。 arr 中两个元素的 间隔 定义为它们下标之间的 绝对差 。更正式地,arr[i] 和 arr[j] 之间的间隔是 |i - j| 。 返回一个长度为 n 的数组 intervals ,其中 interva…

在android添加数据采集,一种基于Android系统的地理信息数据采集方法与流程

本方法属于采集地理信息数据的发明,是一种基于android操作系统和gis地理信息系统进行户外地理信息数据采集的方法。背景技术:众所周知地理信息数据采集在很多行业中都有应用,比如说农业中的土地普查、城市管理中的地下管线普查、工业中的地质…

LeetCode 2124. 检查是否所有 A 都在 B 之前

文章目录1. 题目2. 解题1. 题目 给你一个 仅 由字符 a 和 b 组成的字符串 s 。 如果字符串中 每个 ‘a’ 都出现在 每个 ‘b’ 之前,返回 true ;否则,返回 false 。 示例 1: 输入:s "aaabbb" 输出&#x…

设计模式—桥接模式

前言 这里以电视遥控器为例子引出桥接模式,首先每个牌子的电视都有一个遥控器,可以设计吧遥控器作为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视品牌的遥控器都继承这个抽象类 这样的实现使得每个不同型号的电视都有自…

LeetCode 2125. 银行中的激光束数量

文章目录1. 题目2. 解题1. 题目 银行内部的防盗安全装置已经激活。 给你一个下标从 0 开始的二进制字符串数组 bank ,表示银行的平面图,这是一个大小为 m x n 的二维矩阵。 bank[i] 表示第 i 行的设备分布,由若干 ‘0’ 和若干 ‘1’ 组成。…

LeetCode 2126. 摧毁小行星(贪心)

文章目录1. 题目2. 解题1. 题目 给你一个整数 mass ,它表示一颗行星的初始质量。 再给你一个整数数组 asteroids ,其中 asteroids[i] 是第 i 颗小行星的质量。 你可以按 任意顺序 重新安排小行星的顺序,然后让行星跟它们发生碰撞。如果行星…

bzoj:2018 [Usaco2009 Nov]农场技艺大赛

Description Input 第1行:10个空格分开的整数: N, a, b, c, d, e, f, g, h, M Output 第1行:满足总重量最轻,且用度之和最大的N头奶牛的总体重模M后的余数。 Sample Input 2 0 1 5 55555555 0 1 0 55555555 55555555Sample Output 51HINT 样例…