`
java-mans
  • 浏览: 11432836 次
文章分类
社区版块
存档分类
最新评论

css优先级别

 
阅读更多
CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:
* 页面中定义的样式,加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

例子:
css文件或<style>中如下定义:
1. h1 {color: red;}
/* 一个元素选择符,结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符,结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
元素的style属性中如下定义:
h1 {color: blue;}
/* 页面中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。


分享到:
评论

相关推荐

    CSS模块化设计——从空格谈起

    引子:今天在蓝点看了Yang的博客《CSS样式表中...要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定

    CSS3滤镜效果动画生成器 Css Filterlab.rar

    点击不同的滤镜效果就可以添加各种参数了,效果会即时的显示在右边的界面中,参数有点类似 Photoshop 的图层效果,具有一定的优先级别,你可以拖动参数配置参数的优先级别。 代码是实时生成并且高亮的。 通过下方...

    css 样式加载的优先级使用经验分享

    使用!important可以改变优先级别为最高,其次是style对象,然后是id class tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。感兴趣的朋友可以了解下

    redux-css:Redux中间件可减少CSS变量

    如果您在较高级别上定义变量,它们将继续优先。 通过和 。 安装 yarn add redux-css 或者 npm install --save redux-css 例子 import { createStore , applyMiddleware , compose } from 'redux' import reduxCSS ...

    CSS中的四种引用方式

    优点:这样写的css样式的优先级别是最高的。 缺点:HTML(结构层)与CSS(表现层)代码混合在了一起,文件体积变大,代码混乱不易维护。 内嵌样式 、内部样式 内嵌样式是写在&lt;head&gt;&lt;/head&gt;标签中的;...

    CSS Hack 浏览器兼容整理

    浏览器优先级别:FF &lt; IE7 &lt; IE6 书写顺序一般是将识别能力强的浏览器的CSS写在后面,CSS hack书写顺序一般为FF IE7 IE6 div+css浏览器兼容IE6,IE7,FF之间的标识区别:   IE6 IE7 FF * √ √ ×...

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

    首先,给大家看一篇关于CSS优先级的示例 复制代码代码如下: &lt;span xss=removed&gt;&lt;html&gt; &lt;head&gt; &lt;style type=”text/css”&gt; #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...

    同级情况下CSS的优先级探讨

    如果在网页的HEAD标记中同时使用了STYLE标记符(指定嵌入式样式)和LINK标记符(指定链接式样式),并且这两个样式指定中同时应用了具有同一优先级别的样式,则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级...

    jQuery 添加样式属性的优先级别方法(推荐)

    .css({ color:'blue', border:'2px solid green', background:'blue' }); jQuer为元素添加类 $('#five .a') .addClass('funny'); HTML code &lt;style&gt; .funny{ font-size: 21px; background-color: gray...

    CSS优先级规则的细节

    网页制作Webjx文章简介:详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 最近看到篇对CSS...

    css hack问题

    ie5 hack, ie 6 hack, ie 8 hack,ie 9 我没用,暂时也没接触过9的hack,随着浏览器...浏览器优先级别:FF&lt;IE7&lt;IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;} "为例; 复制代码代码如下:#demo

    如何去掉内联样式 通过style属性定义的(element.style)

    element.style定义样式的优先级别超过style.css引用文件的样式,怎样能使级别超越element.style呢?在css属性值后面加上!important即可实现

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计...通过控制台查看,原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致,我的处理方案是添加 !import

    memoryGame:Javascript ES6内存游戏

    同样,这也是学习最有前途的效用优先CSS框架: 的好机会。 维基百科说(一个举动是一对翻转的牌) : 通过完美的记忆和最佳策略,使用n张牌的n张牌游戏所需的预期移动次数收敛至≈0.8 n。 因此,分数可以简单地...

    collective.rcse:蜜蜂协作实验室

    特征移动优先使用 etherpad 进行协作编辑基于组的工作流(组 == 工作区) Oembed 支持(消费者和提供商) 音频库博客支持活动日历讨论板档案库图片库视频库收藏内容喜欢/不喜欢的内容标签内容组级别的可自定义仪表板...

    Pro for Trello,免费Trello调整「Pro for Trello, FREE Trello tweaks」-crx插件

    Pro for Trello支持3个优先级别! 1.5卡点 - Scrum任何人? :) 1.6卡号 - 将显示为粗体蓝色文字,以便您轻松地为您自己或团队成员(或客户,对吧?)之间引用门票。 1.7全尺寸的Trello标签 - 将这些彩色线条变成适合...

    感谢-u-nextjs:另一个Next.js样板

    谢谢你,Next.js 引导开发人员友好的(?...测试优先在添加功能(组件,页面等)之前,您至少要添加一个级别的测试: 单元测试:开玩笑集成/端到端测试:赛普拉斯UI测试:故事书如果该功能困难或无法弄清楚如何进

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,MenuHyperLink),AccordionLink,TreeNode,Image(如果ImageUrl为空,则取Icon的值)增加Icon属性...

    ExtAspNet_v2.3.2_dll

    -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,MenuHyperLink),AccordionLink,TreeNode,Image(如果ImageUrl为空,则取Icon的值)增加Icon属性...

Global site tag (gtag.js) - Google Analytics