七、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,一经查实,立即删除!

相关文章

武林c语言,详解C语言中条件编译

预处理器提供条件编译,程序的不同部分可以在不同的条件下编译,从而产生不同的目标代码文件,这对于程序移植和调试非常有用,本文是武林技术频道小编给为大家带来的详解中条件编译,一起来了解一下吧!通常情况…

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

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

loadView加载(变换成ScrollView)

/**loadView加载,将系统的view变换成ScrollView*/ - (void)loadView{ [super loadView]; UIScrollView *mainScroll [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame]; mainScroll.scrollEnabled YES; mainScroll.contentSize CGSizeMake(0, …

c语言(int)x 100,【单选题】下列语句执行后,变量a、c的值分别是( ) int x=182; int a,c;c=x/100;a=x%10;...

【单选题】下列语句执行后,变量a、c的值分别是( ) int x182;int a,c;cx/100;ax%10;更多相关问题阅读下面短文,掌握其大意,然后从36-55各题所给的四个选项(A、B、C和D)中,选出最佳选项。In the seventh gradeFor several days I sa…

一、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.按…

二维数组和指针数组

#include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { int arr1[3]; int arr2[3]; int arr3[3]; int * ptr; // ptr1是一个指向 int [3] 的指针&#xff0c;即ptr的类型和&arr1的类型是一样的&#x…

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

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

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

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

NavigationController

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

android studio windows,AndroidStudio的使用(Windows)

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

一、MySQL查询学习笔记(基础查询、条件查询、排序查询、常见函数、分组查询 详解)

DQL语言的学习 一、基础查询 语法&#xff1a; **SELECT 要查询的东西 【FROM 表名】;**类似于Java中 :System.out.println(要打印的东西); 特点&#xff1a; ①通过select查询完的结果 &#xff0c;是一个虚拟的表格&#xff0c;不是真实存在 ② 要查询的东西 可以是常量值、…

LeetCode 2119. 反转两次的数字

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

JVM系列五:JVM监测工具[整理中]

转自本站&#xff1a;http://www.cnblogs.com/redcreen/archive/2011/05/09/2040977.html 前几篇篇文章介绍了介绍了JVM的参数设置并给出了一些生产环境的JVM参数配置参考方案。正如之前文章中提到的JVM参数的设置需要根据应用的特性来进行设置&#xff0c;每个参数的设置都需要…

红米k30 android版本,Redmi K30 Pro 推送 MIUI 12.2.1 稳定版:为安卓跨版本升级

今日&#xff0c;Redmi K30 Pro 推送了 MIUI 12.2.1 稳定版内测更新。新系统基于 Android 11 深度定制&#xff0c;更新了 2020 年 10 月谷歌安全补丁。需要注意的是&#xff0c;本次更新为安卓跨版本升级&#xff0c;为降低升级风险&#xff0c;建议提前备份个人数据。同时&am…

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

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

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

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

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

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