css++什么是权值or权重,css的优先级和权重问题 以及!important优先级

最新推荐文章于 2023-02-11 11:12:17 发布
最新推荐文章于 2023-02-11 11:12:17 发布
阅读量711 收藏 1
点赞数
文章标签： css++什么是权值or权重

一，前言：

刚加的css怎么没有渲染出来？浏览器中查看，发现是被其他的css给覆盖了，相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？

二、正文：

先上一个例子

这是一个CSS选择器的测试

按钮

问：有多少种css选择器可以对

标签样式产生影响呢？

如果详细的进行分析，排列组合有太多种了，太过麻烦。我们就说说有哪几个类别：

行内样式：        即  style = "font-size: 12px"；

id选择器：  　   即  #thisId {font-size: 12px;}

class选择器：   即 .thisClass {font-size: 12px;}

元素选择器：    即  p {font-size: 12px;}

如上四种类别都可以对

标签的样式产生影响，那么谁先谁后，谁打谁小呢？

有如下两种解释：

一个selector的权重表示方式：0.0.0.0，按照计算规则给每位填充数字，对应位置相等，则比较下一位；

也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。

选择器类别

说明

权重表示

权值表示

行内样式

行内只有一个 style = ""

(1.0.0.0)

1000

id选择器

selector中使用了几个id，即#的个数

(0.1.0.0)

100

类选择器

类,伪类,以及属性的个数

如： .outerClass .buttonClass[type="button"]:hover{}

选择器中有2个类,1个属性,1个伪类

(0.0.1.0)

10

元素选择器

伪元素和标签元素的个数，如： p:first-child

选择器中有一个标签元素p和一个伪元素first-child

(0.0.0.1)

1

36eff3570e9f237942ebb13e7c7cbbf6.png

最后的几点说明：

!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；

如果比较后权重相同，那么后者覆盖前者，后渲染的胜出；

内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式；

CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。

重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下10个class并不能逆转1个id。

css的优先级 和 权重问题 以及 !important 优先级

css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

CSS标签类型和样式表继承与优先级

标签类型 块级标签 什么是块级标签:在html中

.

.h1~h6.

.
  • 和
  • 就是块级元素 块级标签 ...

    css知多少(6)——选择器的优先级

    1. 引言 上一节最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的 ...

    CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

    css知多少(6)——选择器的优先级(转)

    css知多少(6)——选择器的优先级   1. 引言 上一节最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...

    HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

    html css的内联样式 内部样式表 外部样式表的优先级

    http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...

    随机推荐

    七牛整合PHP上传文件

    七牛支持抓取远程图片 API,用 access_key + secret_key + url 生成 access_token, 把 access_token 加在 header 里,然后向 post ...

    oracle删除users表空间

    1.users表空间一般情况下是默认的,需将别的空间设置成默认,再删除users表空间(oracle不允许删除默认空间的). 2.删除表空间的同时会报这样的错:ORA-22868错误.原因:推断应该存 ...

    黄聪：C#解析HTML DOM解析类 HtmlParser.Net 下载

    下载地址:HtmlParser.Net.rar 帮助文档:htmlparser.rar 背景: HTMLParser原本是一个在sourceforge上的一个Java开源项目,使用这个Java类库可以 ...

    asp的RegExp对象正则表达式功能用法

    RegExp对象提供简单的正则表达式支持功能. RegExp对象的用法: 以下为引用的内容: Function RegExpTest(patrn, strng) Dim regEx, Match, M ...

    解决ios不支持按钮:active伪类的方法

    mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :active state unless t ...

    Chrome游览器使用时，修改文件和网页刷新后，不能显示效果

    一:因为游览器缓存问题 有时候在写完代码后,刷新游览器,发现自己写的目标是让某一个东西隐藏,但是结果是依旧显示着,打开调试工具在Sources中发现,文件依旧是上次的旧的文件,新文件没有加载进去,无论 ...

    java面试一、1.5JVM

    免责声明:     本文内容多来自网络文章,转载为个人收藏,分享知识,如有侵权,请联系博主进行删除. 1.5.JVM JVM运行时内存区域划分

    建立标准编码规则(一)-自定义C#代码分析器

    1.下载Roslyn的Visual Studio分析器模板插件(VS2015 或VS2017) https://marketplace.visualstudio.com/items?itemName= ...

    SPFILEOPENBANKDB.ORA 手动编辑产生问题

    因为最近启动后发现经常内存高占用,一个ORACLE实例占用超过7G内存,两个就15G,卡的让人坐立不安.于是百度了一下,使用下面的命令将sga_max_size从7G修改为200M show para ...

    linux系统管理 vi编辑器

    Vim是vi improved的缩写是vi的改进版本,vi被认为是事实上的标准编辑器 所有版本的Linux都带有vi编辑器 占用的资源少 与ed,ex等其他编辑器相比,vi对用户更加友好 进入vi编辑 ...

股海重生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css权重，权值与优先级解析
HOMEXS的博客
11-08 2464
1. 权重概念： 权重，是一个相对的概念，代表了选择器之间的相对重要程度。 　　 2. 权值概念： 权值又叫权重系数，是根据选择器之间权重大小而得到的量化的值。 　　 3. css优先级： css样式的优先级是由其权值决定的，权值越高其css优先级越高，但这里有个例特殊点，!important的权值可看做无限大 4.权值计算 第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0； 第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0； 第三等级：代表 calss | 伪类
计算机权值,权值
weixin_36354965的博客
08-02 2118
在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。首先，我们需要了解加权平均数的概念。加权平均数是不同比重数据的平均数，加权平均数就是把原始数据按照合理的比例来计算，若 n个数中，x1出现f1次，x2出现f2次，…，xk出现fk次，那么(x1f1 + x2f2 + ... xkfk)/(f1 + f2 + ... + fk) 叫做x1，x2，…，xk的加权平均数。f1，f2，…，fk...
css 权重、权值（标签优先级）
weixin_44167504的博客
09-07 275
css 权重、权值（标签优先级） id:100 class:10 tag:1 #box>div{}=>权值101 #box1{}=>权值100 <div id="box"> <div id="box1"></div> </box>
css的优先级和权重问题 以及!important优先级
qq_39380155的博客
11-16 1612
后的几点说明： !important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式； 如果比较后权重相同，那么后者覆盖前者，后渲染的胜出； 内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式； CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也...
权重和层叠规则决定了CSS样式优先级
12-13
首先，给大家看一篇关于CSS优先级的示例 复制代码代码如下: <span xss=removed><html> <head> <style type=”text/css”> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...
浅谈CSS 权值 层叠 重要性(!important)
12-29
1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?...是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。 下面是权值的规则： 标签的权
彻底弄懂CSS选择器以及优先级
01-08
CSS选择器优先级得关系为： !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。（#id） 权值为100 统计选择符中的CLASS属性...
【CSS】CSS选择器优先级及!important属性
热门推荐
LZGS_4的专栏
02-03 2万+
CSS的选择器是有权重的，当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。权重（即优先级）的规则如下，权重越高，优先级越高： 同一个元素可以使用多个规则来指定它的同一样式（比如字体颜色），每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。很多人仅仅知道选择器优先级ID>class>元素选择器，而不知道
CSS基础之CSS选择器及CSS权重
Song_dui_dui的博客
12-13 750
CSS的权重分配： /*取值： 2556进制*/ !important: Infinity; 行间样式： 1000; id选择器： 100; class选择器|属性选择器|伪类: 10; 标签选择器|伪元素: 1; 通配符： 0 ...
CSS入门篇03.常用选择器及选择器权重（二）
m0_62404129的博客
08-12 209
important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器。5. [属性名*=属性值]{} 选择含有指定属性，只要含有某个属性值的元素。3. [属性名^=属性值]{} 选择含有指定属性及属性值开头。4. [属性名$=属性值]{} 选择含有指定属性及属性值结尾。2. [属性名=属性值]{} 选择含有指定属性及属性值元素。同类型中：：first-of-type 第一个子元素。语法：1.[属性名]{} 选择含有指定属性的元素。：：after 在元素开始的位置后。....
前端html5+css3：超级实用的标签++（附源码）
qq_57210034的博客
05-25 631
目录 html5部分 1.datalist标签 2.label标签 css3部分 1. html5部分 1.datalist标签 1.1作用：可以用来做搜索框的数据列表 1.2效果图： 2.3 说明： label标签的for="item"显式关联着input标签的id="item"; input标签的list="items"关联着datalist的id="items"; 这是得出最终页面效果的关键。 2.4 完整代码： <!DOCT...
CSS选择器的权重与优先规则？
qiudechao1的博客
12-24 509
标签： 我们做项目的时候，经常遇到样式层叠问题，被其他的样式覆盖，或者写的权重不高没效果，对权重进行具体的分析，做了一个总结。 css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》 如下图，css规则由选择器和声明块组成，写在选择器后面...
CSS 重新认识 !important 肯定有你不知道的
broken_promise的博客
02-11 1万+
如果将!important添加到CSS变量声明中, 只有赋值时!important才起作用. 也就是将pink复制给变量时起了作用, 因为如果没有!important的值应该是skyblue赋值之后!important就从自定义属性上「脱落」了, 使用var()函数时并不会传递!important.box8 {从下图就可以看出,.box8的背景色是red, 因为关于背景色的两条CSS声明都是一般声明.
css中的 +,~, ＞
weixin_43755104的博客
07-30 1万+
文章目录css中的选择器~(波浪号)+(加号）\>(大于号) css中的选择器 ~(波浪号) p~ul选择器 p之后出现的所有ul。 两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。 P~ul { background-color: pink; } <p>快乐生活</p> <ul> 　　 <li>生活</li> 　　 <li>生活</li> 　　 &
神经网络权重是什么意思,神经网络权值和阈值
shirley67269的博客
08-19 5613
神经网络一般都是非常庞大的，每个边对应一个权值，如果权值不共享的话，数据量就更大了，但是为了提高效率，引入了权值共享，但是还不够，想再次提高效率和精确度，进行主成分分析，把一些重要的权重保留，不重要的舍弃，你这个权值分布就很有意义了，比如权重是5的权值在概率上占到了百分之95，或者说主成分分析的结果前2类权重就占据了百分之80，那么剩下的权值就可以省略，当然这都是理论上的。但有的数据记录中有一些相同的数据，在计算的时候，那一个数有几个相同数，就把这个数乘上几，这个几，就叫权，加权，就是乘上几后再加。
css中“~”和“>”和“+”是什么意思
萧十一郎博客
03-24 8916
css中“~”和“>”和“+”是什么意思
【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
【敦厚的曹操】的专栏
04-14 1万+
css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解 - 知乎对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。 1、>(大于号) 子元素选择器 >大于号的意思是 选择某元素后面的第一代子元素 案例<style type="text/css"> h1&…https://zhuanlan.zhihu.com/p/180011240 对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。
css中的','、'>'、'+'、'~'
weixin_34384915的博客
06-10 5873
,(群组选择器) A , B{ } 复制代码空格(后代选择器) //选择A所有的后代B元素 A B{ } 复制代码>（子元素选择器） //选择A的一代B元素 A > B{ } 复制代码总结：“>”是css3中特有的选择器，A B选择所有后代元素，为A>B只选择一代。 +(相邻兄弟选择器) //设置的是紧跟在A元素后的B元素，指定元素的下一个元素...
什么是权重什么是权值
最新发布
07-28
权重和权值是在不同领域中使用的概念。 在CSS中，权重是指选择器之间的相对重要程度，用于确定样式的优先级。权值是根据选择器之间的权重大小而得到的量化值。CSS样式的优先级由权值决定，权值越高，CSS优先级越高。特殊情况下，使用!important可以将权值视为无限大。\[1\] 在神经网络中，权重是指连接神经元之间的边所对应的值。神经网络通常非常庞大，每个边都有一个权重。为了提高效率，引入了权值共享的概念，即多个边共享相同的权值。此外，为了进一步提高效率和精确度，可以使用主成分分析来保留重要的权重，舍弃不重要的权重。通过主成分分析，可以确定哪些权重对结果的影响较大，从而可以省略剩下的权重。\[2\]\[3\] #### 引用[.reference_title] - *1* [css权重，权值与优先级解析](https://blog.csdn.net/HOMEXS/article/details/121214729)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [神经网络权值是什么意思,神经网络权重取值范围](https://blog.csdn.net/mynote/article/details/126203068)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [神经网络权重是什么意思,神经网络权值和阈值](https://blog.csdn.net/shirley67269/article/details/126427142)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值