css权重核心概念

1. 权重概念:

  权重,是一个相对的概念,是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

  权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下,这一指标项的变化,对结果的影响。

 

2.css权重的理解:

  每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值”;

  css通过css选择器的权重占比,来计算css选择规则的总权值,从而确定 定义样式规则的 优先级次序;

从“css权重的理解”中得知,原来所谓为的 css选择规则的优先级 是按照 css选择器的权值的比较 来确定的(可能光看这句还是一头雾水的,不急,看完我接下来介绍 估计你马上会有豁然开朗的感觉,但,请先记住这句话);

 

3.css优先级规则:

   1.css选择规则的权值不同时,权值高的优先;

   2.css选择规则的权值相同时,后定义的规则优先;

   3. css属性后面加 !important 时,无条件绝对优先;

 

4. 权值的计算:

  网上很容易找到这张图,他描述了css选择器的权值等级划分:

  

       看不懂图也可以记住几个关键词:

  1. !important——无限大
  2. 行间元素——1000
  3. ID——100
  4. class | 属性 | 伪类——10
  5. 标签 | 伪元素——1
  6. 通配符——0

 

  权值等级划分, 一般来说是划分4个等级:

    第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;

    第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;

    第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

    第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

    此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

 

  权值计算 公式:

    权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;

 

  权值比较 规则:

    当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢,因为为在网上查资料的时候,看到好多博客是把这个权重值理解成了所有等级的数字之和了】说到这里 再 配合下图 大家应该就差不多理解了,

  总结,这个比较规则就是三点

    1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

    2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

    3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

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

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

相关文章

[css] 用css3画出一个立体魔方

[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>立方体</title><style>.box{width: 300px;he…

Qt的简单介绍,发展和由来

一.Qt的介绍 1. Qt是图形用户界面程序框架&#xff0c;也可以称作Qt库&#xff0c;能做界面的还有MFC(只能在windows下使用)&#xff0c;GTK 2. Qt的由来和发展 1. Qt的历史&#xff1a; Qt是1991年奇趣科技公司&#xff08;2008 年 6 月被诺基亚收购&#xff09;开发的一个跨平…

[css] 举例说明shape-outside的属性的用途有哪些?

[css] 举例说明shape-outside的属性的用途有哪些&#xff1f; shape-outside定义了一个可以是非矩形的形状&#xff0c;相邻的内联内容应围绕该形状进行包装。比如使用 shape-outside: circle(); 属性可以实现文字圆形环绕图片的效果。个人简介 我是歌谣&#xff0c;欢迎和大…

2019年7月前CSDN最新排名

截止到2019年6月27日&#xff0c;CSDN排前的大神&#xff1a; 排名第16&#xff1a;https://blog.csdn.net/hejishan 排名第13&#xff1a;https://blog.csdn.net/21aspnet 排名第11&#xff1a;https://blog.csdn.net/notbaron 排名第10&#xff1a;https://blog.csdn.net/…

SpringCloud(二) 服务注册到Eureka

本篇将完成一个可以注册到注册中心的最简单的服务。无论是服务提供者还是服务消费者&#xff0c;都可以在此项目基础上完善出来。 基础服务 最基础的服务&#xff0c;只完成注册到注册中心。 1、pom.xml 文件 1 <?xml version"1.0" encoding"UTF-8"?&…

CSS之层模型

一&#xff1a;理解 如果懂Photoshop的同事&#xff0c;那么层模型就像它的图层那样&#xff0c;上下图层互不影响&#xff0c;可以重叠组合出你想要的视觉。 或者可以理解为楼层&#xff0c;同一栋大厦的不同楼层&#xff0c;再二维角度说&#xff0c;大家的经纬度&#xff…

[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?

[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系&#xff1f; QQ20150717160352 做了几个移动端的项目之后&#xff0c;深感移动端尺寸换算的必要性&#xff0c;在此做个总结。 先介绍下各自的定义&#xff1a; px&#xff1a;pixel&#xff0c;像素&#xff0c;电子屏幕…

SQL多列查询最大值

直接从某一列查询出最大值或最小值很容易&#xff0c;通过group by字句对合适的列进行聚合操作&#xff0c;再使用max()/min()聚合函数就可以求出。 样本数据如下&#xff1a; key_idxyzA123B552C471D338求查询每个key的最大值&#xff0c;展示结果如下&#xff1a; key_idcolA…

CSS之浮动模型

浮动模型又叫流模型&#xff0c;什么是float&#xff08;浮动&#xff09; 最早是为了适应报纸的排版&#xff0c;文字环绕图片的效果&#xff0c;后来经过使用和研究发展出一系列复杂的用法。 CSS 的 Float&#xff08;浮动&#xff09;&#xff0c;会使元素向左或向右移动&…

工作336:uni-ele-el-table修改宽度问题

<el-table-columnfixed"right"header-align"center"label"操作"width"200px">

java 递归调整为队列

如果递归的是深而不广的树时&#xff0c;应该使用队列来优化递归&#xff1b;如果递归是广而不深的树的时候&#xff0c;就应该用递归来优化队列。 https://blog.csdn.net/pseudonym_/article/details/71600084?utm_sourceitdadao&utm_mediumreferral转载于:https://www.c…

工作337:pc-ele-ment联查问题

<grid-radiochange"ListRuery"v-model"query.platform":border"true":options"platform_category"/><!--query.platform--></el-form-item><el-form-item label"平台选择"><!-- <el-checkbo…

html中内联元素和块级元素的区别(整理版)

块级元素和内联元素的主要区别 块级元素 内联元素&#xff08;即行内元素&#xff09; 总是在新行上开始&#xff0c;独占一行默认情况下&#xff0c;宽度自动填满其父元素 相邻的行内元素会排列再同一行里&#xff0c;直到一行排不下&#xff0c;才会换行&#xff0c;宽度随…

工作338:pc重置筛选条件

this.query{}console.log(this)getAction("/account/list",{query:{platform_channel: this.query.platrorm_channel,platform_category:this.query.platform,department_id:this.query.department,}}).then(res>{console.log(res)this.accountListres.data})运行…

Python---通配符的使用

苹果单价 9.00 元&#xff0f;斤&#xff0c;购买了 5.00 斤&#xff0c;需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台如果希望输出文字信息的同时&#xff0c;一起输出 数据&#xff0c;就需要使用到 格式化操作符% 被称为 格式化操作符&#xff0c;…

工作339:pc父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题

</el-form><div><!--子代方法有一个传值传向父级 onselect去接收这个值--><select-account :data1.sync"accountList" :checkedData.sync"checkedData1" seletct"onSelect" /></div><div style"clear: bo…

H5新增的标签和属性

声明 Web 世界中存在许多不同的文档。只有了解文档的类型&#xff0c;浏览器才能正确地显示文档。 HTML 也有多个不同的版本&#xff0c;只有完全明白页面中使用的确切 HTML 版本&#xff0c;浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!…

Qt错误汇总

1-工程文件不能包含中文路径。 2-转载于:https://www.cnblogs.com/chdfelix/p/9548686.html

css之文本溢出处理 | 背景图片处理

文本溢出处理 单行文本用缩略符号——text-overflow:ellipsis; 多行文本做截断策略——line-height * 行数 height;text-overflow:hidden; 背景图片处理相关属性 1、background&#xff1a;设置对象的背景样式&#xff0c;是一个复合属性&#xff0c;可以用于同时设置背景…

hdu 2196 computer

hdu 2196 题意 给出一棵树&#xff0c;求出树上每一个点在树上走一条简单路径所能走的最长距离。 解法 说起来&#xff0c;这是我今天1A的第一题 我们设\(up[i]\) 表示从这个点向上走到某个点又向下走的最长距离 设 \(down[i][0]\) 表示从这个点出发向他的子树所能走到的最大距…