css的权重

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

前端开发之-------------合理利用CSS的权重----------------

什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨论CSS的权重,则必须想了解而且是深刻的了解CSS样式的6种基础选择器:ID选择器.类选择器.属性选择器.伪类和为对象选择器.标签选择器以及统配选择器.所有在CSS样式中定义的选择符都是由这6种基础选择符组合而成的,组合的方式也分为三种:后代选择符.子选择符.相邻选择符.(如果希望更详细的认识选择器…

CSS 关于权重的另类解说

众所周知,对于CSS中权重的顺序,从大到小依次如下: !important id class 标签在html标签中写入行内样式style,又大于link引入.相同类型的样式标记,在数量上多的大于数量少的,!important也不例外但还有另外一种特例,例如宽度(width),即使对width定义了最高级别的!important,一旦一个class对其宽度做了最大限制,即max-width,最终也是class完胜. 所以说,以上列举的顺序并不能完全决定一个节点的最终样式在传统的解说中,一般会…

CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原则(priority rules)”! 首先,我们来一个简单的例子: <body> <ul id="summer-drinks"> <li class="favorite">First section</li> <l…

CSS的权重（转）

CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候我们不得不庆幸生在这个知识共享的网络时代! 转载地址:深入解析CSS样式层叠权重值作者是小李刀刀,非常感谢他…

Uint 5.css继承权重,盒模型和border padding

一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有:color,font-*,text-*,line-*就这4个文本属,不能被继承的属性有:盒子元素,定位元素(浮动,绝对定位,固定定位). <!DOCTYPE html> <html lang="en"> <head> <meta charset=…

CSS选择器权重计算

CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id .link a[href] ----- #id(100) + .link(10) +a(1) + [href](0) = 111 #id .link.active ----- #id(100) + .link(10) + .active(10) = 120 显然,下面的权重比上面的高,那么如果有相…

CSS 选择器权重计算规则

其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size:12px;color:#000;">我的行间CSS样式.</h1> 2.内联 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 3.外部 <link…

CSS样式权重的级联cascade的概念

我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以后只能在firefox中正常显示.因为那个css涉及的滤镜太多,而且还有css中"级联(cascade)"这种强大功能的支持. 那么级联样式表css中的"级联"到底是什么意思呢?W3C是这样来描述的:css级联为每个样式规则指派权重,若元素应用了多个样式规则,那么将优先…

【CSS】简略说明css的权重之分

/*权重 :id > class > 标签 (小环境) 权重:内联 > 内部 > 外部 (大环境) 小环境处于内部环境中 */ <style> #p1{ /* id类选择器 */ css样式 } .class{ /* class类选择器 */ css样式 } p #p3,#p1 { /* 混合选择 p3不生效 */ css样式 } p#p3,#p1 { /* 更为精确的混合选择权重除内联之外最大 p1,p3都生效 */ css样式 } p { /* 标签选择权重小于…

13 CSS样式权重问题

<!-- 权重问题整体说明: 1.权重的意义:判定CSS属性的优先级高低,也就是说判定那个CSS的属性优先显示,将其他的低优先级的CSS样式覆盖掉. 2.如何判断权重:数选择器的数量,按照Id选择器.类选择器.标签选择器进行展示(注意:不进位),结果大的优先级高, 如:id选择器的个数为5,类选择器为8,标签选择器为6,则该样式的权重为586,如果另一个样式的权重为468,则第一个样式的权重大,优先展示第一个CSS样式 3.权重的原则 (1)前提是选中标签,看权重,权重大的优先级要高,如果权重…

CSS选择器权重计算规则

从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符. important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重为0,0,1,0 标签的权重为0,0,0,1 伪类的权重为0,0,1,0 属性的权重为…

css选择器权重、样式继承、默认样式

学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同相同css文件:写在后面的起作用不同css文件:后导入的起作用但今天遇到一个问题 <body> <div style="color: red"> <span>123</span> </div> </body> 却是这样的…

CSS 选择器权重计算规则(转)

css样式权重优先级，css样式优先级

原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重为0,0,1,0 标签的权重为0,0,0,1 伪类的权重为0,0,1,0 属性的权重为0,0,1,0 伪对象的权重为0,0,0,1 通配符的权重为0,0,0,0 忽然意识到上…

HTML+CSS基础权重的计算权重计算规则

权重的计算将选择器上面的选择器进行叠加,叠加后的总和就是该选择器的权重. 权重计算规则…

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意:还有一个权值比较特殊--继承也有…

css选择器权重问题

important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0…

css中权重与继承

出处:http://blog.csdn.net/xf616510229/article/details/53613212…

css 最高权重 !important;

border-top: 1px solid #ccc !important;…

权重和层叠规则决定了CSS样式优先级

一.基本的优先级规则比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承二.CSS权重规则在<页面重构中的模块化设计>中提到,影响CSS样式权重,有两个重要因素: A:样式的优先级跟样式定义的顺序有关 B:权值的大小跟选择器的类型和数量有关一般来说,在同一个CSS文件中,如果有两个同名的样式…

JS添加DOM元素CSS权重BUG

修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽度为1PX.按理说css文件中的权重是1,直接写在TD中的css属性权重最高.但是不显示.我想是页面refloat的问题. 把css文件中的td样式宽度不设置就恢复正常. 晚点做做实验,看看是不是DIV等元素也是这样.…

CSS:权重和层叠规则决定了其优先级

首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承二.CSS权重规则在<页面重构中的模块化设计>中提到,影响CSS样式权重,有两个重要因素: A:样式的优…

CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）

在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符.如下例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-test</title> <st…

学习总结：CSS(一)定义方式、选择器、选择器权重

一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;"> 3.外部样式:<link rel="stylesheet" type="text/css" href="地址" > 注:浏览器异步加载html.css.js文件二.CSS选择器 1.常用选择器:类选择器.id选择器.标…

vue mand-mobile ui加class不起作用的问题 css权重问题

vue mand-mobile ui加class不起作用的问题 css权重问题组件的样式优先权比自己定的class高多加几层权重才行,要直接用样式覆盖也可以在前面多加几层class,定位更精确了才会覆盖组件的样式覆盖的class要跟组件一样,中间不能空开,空开了就不生效了. 覆盖的class要跟组件一样,中间不能空开,空开了就不生效了. <md-button type="warning" class="coin_down">{{coin.rise_r…

css选择符权重

css选择符权重目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表选择器权重内联样式 1000 ID 0100 CLASS 0010 属性选择符 0010 TAG 0001 伪元素 0001 伪类 0001 inhref 0000 群组选择符不变后代选择符相加 CSS选择符冲突处理 1.权重不同:选择符的css发生冲突时,拥有高权值的css选择符将会显示 2.权重相同:选择符权重一样,将会按照加载顺序进行覆盖(就近原则) 3.…

CSS权重的比较方法

CSS的权重如下: !important Infinity正无穷行间样式 1000 id 100 class|属性|唯类 10 标签|伪元素 1 通配符 0 256进制当出现多个选择器时在同一行的选择器权重相加即可当两个混合选择器权重相同时优先选择后面的选择器如: html <div class="divClass" id="idDiv"> <p class="classP" id="id…

前端深入之css篇|你真的了解“权重”吗？

写在前面权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了.但还有的时候,!important也并不能解决我们的问题,下面请跟随我来详细了解一下css的权重吧! 探索权重指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性. 以上是摘自百度百科对“权重”的解释.css中权重就相当于不同选…

CSS 导入-选择器-权重

CSS 导入-选择器 Cascading Style Sheets 层叠样式表它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构选择器声明{} 属性名:属性值 css三种引入方式内嵌式 <p style='color:red;'>文字颜色为红色</p> 嵌入式 <style type='text/css'> p{ color:red; } </style> 外部式 <link rel="styleshe…

【css的权重】的更多相关文章