CSS权重的等级划分

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重的计算实例

1、实例一：

<style type="text/css">div{color:red !important;}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red
-->

2、实例二：

<style type="text/css">#content div.main_content h2{color:red;    }#content .main_content h2{color:blue;}
</style>
......
<div id="content"><div class="main_content"><h2>这是一个h2标题</h2></div>
</div>
<!--
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

转载于:https://www.cnblogs.com/fwl8888/p/9184658.html

CSS权重的等级划分相关推荐

html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
你应该知道的一些事情——CSS权重
本文由99根据Vitaly Friedman的<CSS Specificity: Things You Should Know >所译,整个译文带有我们自己的理解与思想,如果译得不好或不对 ...
”上帝“的数学定义，人工智能智商与等级划分研究最新进展
声明:本研究的"上帝"与研究者宗教立场没有关联,而是从人工智能智商和等级划分研究中对"上帝"概念的引用. 2017年5月,论文"人工智能的智商和智能等 ...
css权重机制,css权重
什么是CSS权重? 当很多的规则被应用到某一个元素上时,com权重决定了哪一条规则会被浏览器应用在元素上. 两个选择器权重值相同,则最后定义的规则被计算到权重中,后面的取代前面的.引入的样式表( @i ...
html 样式权重,CSS 权重详解
对于 CSSer 来说,多多少少都会遇到过 "样式规则不生效?"."样式规则被覆盖?" 等等问题,这些都与 CSS 权重有关系. 选择器匹配原理在此之前,容我 ...
关于css权重那些事情
css权重与计算昨晚上老师讲css知识点,一直觉得这老师上课不好玩也没听他上课,然后他点名问我css啥啥啥样式怎么怎么样,我当时直接懵了我上课没听课,当时还在看java书,况且您老人家啷个就突然间 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
信息系统安全等级保护的定级准则和等级划分
定级准则: 坚持自主定级.自主保护的原则. 应当根据信息系统在国家安全.经济建设.社会生活中的重要程度,信息系统遭到破坏后对国家安全.社会秩序.公共利益以及公民.法人和其他组织的合法权益(受侵害客体) ...

CSS权重的等级划分

CSS权重

权重的等级

权重的计算实例

CSS权重的等级划分相关推荐

最新文章

热门文章