转-CSS优先级(权重)解析
1.多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低:
!important的用户样式
!important的作者样式
作者样式
用户样式
浏览器定义的样式 2.
CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。
权重设定如下:
html选择器,权重为1;
类选择器,权重为10;
id选择器,权重为100;
这里还有一种情况:在html标签中直接使用style属性,这里的style属性的权重为1000;
即如下情况:
#x34y {color:red}
<. p id=x34y style="color:green"> 优先选择style=""设定的样式。 例子:
h1{color:blue} 权重为1
p em{color:yellow} 权重为2
.warning{color:red} 权重为10
p.note em.dark{color:grag} 权重为22
#main{color:black} 权重为100 这里还有一种情况:
权重一样时如何处理? 3.CSS样式的层叠原则——谁离我近,谁说了算。
当权重一样时,会采用“层叠原则” 后定义的会被应用。
如:p{color:yellow}
p{color:red}
作用到这里 <. p >我的什么颜色呢?< /p>
结果会是red的。 4.CSS样式的特殊标记——谁有特权,谁说了算。
如果有人看不顺眼,非得要自己说了算,那可以搞点特权,如下即可
p {color:blue !important;}
加上!important;可将自己权重设为最高。 摘抄于:https://zhidao.baidu.com/question/371989189.html
转-CSS优先级(权重)解析的更多相关文章
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- 关于CSS的优先级,CSS优先级计算,多个class引用
原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优 ...
- Css权重解析
Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...
- css选择器优先级全解析
这样一个问题: <!doctype html> <htmllang="en"> <head> <metacharset="UTF ...
- CSS那些事儿-阅读随笔2(选择符的组合与优先级/权重)
在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符 类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符 ...
- CSS优先级的及其衡量标准CSS权重
一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- css的层叠性+继承性+优先级+权重
一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...
- css优先级和权重
1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
随机推荐
- Access一些常用的SQL语句
您可以将 Microsoft Office Access 2013 用作创建.修改数据库以及处理数据的工具,还可将 Office Access 2013 用作服务器数据库管理系统(如 Microsof ...
- Perception(1.2)
4.1.2 Definition of Coordinate Systems The global coordinate system is described by its origin lying ...
- 最强DE 战斗力 (nyoj 541)
题解链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=541 几天前百度题解后用数学知识AC的,后来大牛说这是一道动态规划题. 网上的数学解题链接 ...
- 仿QQ空间视差效果,ListView.setHeader( )
根据listview的手指移动事件,动态设置listview上面的图片的宽高,并在手指放开的时候 实现图片的动画(随时间变化的动画值) ValueAnimator.ofInt ( ) import a ...
- JSONP 的工作原理是什么?
利用<script>标签没有跨域限制的"漏洞"来达到与第三方通讯的目的. 当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形 ...
- 网页数据抓取(B/S)
C# 抓取网页内容(转) 1.抓取一般内容 需要三个类:WebRequest.WebResponse.StreamReader 所需命名空间:System.Net.System.IO 核心代码: We ...
- ASP.NET网站怎么发布 Web项目程序怎么发布部署(暂时收藏)
Web程序如何发布部署呢.网站项目做好了,需要发布出来,提交给客户,装上服务器.那怎么在ASP.NET开发环境中将网站程序发布出来呢 ^_^ 工具/原料 Visual Studio 2010 ( ...
- 四大高质量且实用的chrome翻译插件推荐
Google英译汉的质量怎么样?日常生活用语翻译还可以,但是一到专业性术语就歇菜了,翻译出来的东西简直就是惨不忍睹,惨绝人寰..对于酷爱英语学习又有强迫症的患者来说,一款既实用又方便,无疑就是雪中送炭 ...
- 修改LibreOffice Draw中定义的样式名称
目前我使用的是LibreOffice 4.2.4.2.经过以往的测试和使用经验,这是诸多版本中较为稳定和bug相对较少的.今天无意中发现该版本的LibreOffice Draw存在一个问题:样式名称修 ...
- @property、@synthesize和dynamic的用法
原文: http://blog.csdn.net/hherima/article/details/8622948 @代表“Objective-C”的标志,证明您正在使用Objective-C语言 O ...