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

相关文章

SpringCloud(二) 服务注册到Eureka

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

CSS之浮动模型

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

工作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…

工作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;…

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

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

CSS之盒模型

怎么理解盒子模型&#xff1f; 盒子模型是样式表&#xff08;css&#xff09;控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法&#xff0c;才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子&#xff0c;占据一定的页面空间。占据的空…

浏览器的组成

外壳shell&#xff1a;User Interface&#xff08;用户界面&#xff09;、Browser engine&#xff08;浏览器引擎&#xff09;、Networking&#xff08;网络&#xff09;、UI Backend&#xff08;UI 后端&#xff09;、Date Persistence&#xff08;数据持久化存储&#xff09;…

[css] 异步加载CSS的方式有哪些?

[css] 异步加载CSS的方式有哪些&#xff1f; 异步加载CSS 说到加载 CSS 这种事儿不是很简单吗&#xff1f;像这样咯&#xff1a; 这不就完事儿了嘛&#xff01; 这样是没错&#xff01;但是这样有问题啊——会阻塞渲染&#xff01;浏览器看到这个标签就会停下手里的活儿&…

Golang 垃圾回收机制

1. Golang GC 发展 Golang 从第一个版本以来&#xff0c;GC 一直是大家诟病最多的。但是每一个版本的发布基本都伴随着 GC 的改进。下面列出一些比较重要的改动。 v1.1 STWv1.3 Mark STW, Sweep 并行v1.5 三色标记法v1.8 hybrid write barrier2. GC 算法简介  这一小节介绍三…

【一步一步学习spring】spring入门

1. spring概述 spring是一个开源框架spring为简化企业级应用开发而生&#xff0c;解决的是业务逻辑层和其他各层的松耦合问题&#xff0c;他将面向接口的编程思想贯穿整个系统应用。spring是javaSE/EE的一站式框架。web层有spring-mvc&#xff0c;业务层有spring ioc、事务等机…

JavaScript 操作 HTML DOM (文档对象模型) 相关知识点

HTML DOM 树 通过可编程的对象模型&#xff0c;JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应…

JS运行三部曲

语法分析 预编译 解释执行 下面两句话能解决问题&#xff0c;但解决不了深入的问题&#xff0c;其实原理是 预编译产生的两个现象&#xff08;规律&#xff09;。 函数声明整体提升变量 声明提升 预编译前奏 imply global 暗示全局变量&#xff1a;即任何变量&#xff…

作用域及上下文理解

书本中的解释 [[scope]]:每个javascript函数都是一个对象&#xff0c;对象中有些属性我们可以访问&#xff0c;但有些不可以&#xff0c;这些属性仅供javascript引擎存取&#xff0c;[[scope]]就是其中一个。[[scope]]:指的就是我们所说的作用域&#xff0c;其中存储了运行期上…

windows下安装ElasticSearch的Head插件

es5以上版本安装head需要安装node和grunt(之前的直接用plugin命令即可安装) (一)从地址&#xff1a;https://nodejs.org/en/download/ 下载相应系统的msi&#xff0c;双击安装。 &#xff08;二&#xff09;安装完成用cmd进入安装目录执行 node -v可查看版本号 &#xff08;三&…

JavaScript 闭包

闭包概念&#xff1a; 当内部函数被保存到外部时&#xff0c;将会生成闭包。闭包会导致原有作用域链不释放&#xff0c;造成内存泄漏。 什么时候才会触发闭包呢&#xff1f; 当两个函数互相嵌套&#xff0c;把里面的函数被保存到了外部&#xff08;全局&#xff09;&#xff…

PyAutoIt 安装(Windows 版)

转载于:https://www.cnblogs.com/Crixus3714/p/9592635.html

scp命令:服务器间远程复制代码

scp是secure copy的简写&#xff0c;用于在Linux下进行远程拷贝文件的命令&#xff0c;和它类似的命令有cp&#xff0c;不过cp只是在本机进行拷贝不能跨服务器&#xff0c;而且scp传输是加密的。可能会稍微影响一下速度。当你服务器硬盘变为只读 read only system时&#xff0c…

Centos7安装部署Zabbix3.4

1.关闭selinux和firewall 1.1检测selinux是否关闭 [rootlocalhost ~]# getenforce Disabled #Disabled 为关闭 1.1.1临时关闭[rootlocalhost ~]# setenforce 0 #设置SELinux 成为enforcing模式1.1.2永久关闭 [rootlocalhost ~]# vi /etc…

JavaScript中的回调函数(callback)

前言 callback&#xff0c;大家都知道是回调函数的意思。如果让你举些callback的例子&#xff0c;我相信你可以举出一堆。但callback的概念你知道吗&#xff1f;你自己在实际应用中能不能合理利用回调实现功能&#xff1f; 我们在平时的学习中容易犯不去深究的病&#xff0c;功…