• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > CSS优先级的相关知识详细介绍

CSS优先级的相关知识详细介绍

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,优先级等相关知识,佚名 希望在学习及工作中可以帮助到您

  在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(Cascading Style Sheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过程中我们经常需要用到。我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。

  其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。言归正传,开始进入今天的话题。

  一、什么是CSS优先级?

  所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

  二、CSS优先级规则

  既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。

  样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

  1、统计选择符中的ID属性个数。

  2、统计选择符中的CLASS属性个数。

  3、统计选择符中的HTML标记名个数。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

  例如:

  1、每个ID选择符(#someid),加 0,1,0,0。

  2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

  3、每个元素或伪元素(:firstchild)等,加0,0,0,1。

  4、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

  三、特性分类的选择符列表

  以下是一个按特性分类的选择符的列表:

  1

  单从上面这个表来看,貌似不大好理解,下面再给出一张表:

  1

  通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。

  按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

  优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。

  说到这里,我们不得不说一下CSS的继承性。

  四、CSS的继承性

  4.1 继承的表现

  继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

  样式定义:

  1

  举例代码:

  1

  举例效果:

  

  这段代码的应用结果是:“CSS继承性的测试”这段话是红颜色的,“继承性”几个字由于应用了标签,所以是粗体。很显然,这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

  然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

  我们仍以上面的举例代码为例:在样式定义中添加一条:

  1

  举例效果:

  发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。

  4.2 继承的局限性

  继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。

  有一些属性不能被继承,如:border, margin, padding, background等。

  样式定义:

  1

  举例代码:

  1

  预期效果:

  

  实际效果:

  

  从上面的效果中,我们可以看出,border是不能被继承的,还有一些其它的属性也是如此,这里就不一一列举。

  五、附加说明

  1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。

  2、有!important声明的规则高于一切。

  3、如果!important声明冲突,则比较优先权。

  4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

  5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。

  6、关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。

  还需要说一下,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其它规则定义之前的,这可能会引发一些误会。

  优先权问题看起来简单,但背后还是有非常复杂的机制,在实际应用中需要多多留意。

您可能想查找下面的文章:

  • html、css基础注意点(前端必看篇)
  • 关于CSS absolute与relative不得不说的话
  • 响应式设计你需要了解的知识点
  • CSS3的几个标签速记(推荐)
  • CSS样式表与格式布局详解
  • 那些你所不知的CSS ::before 和::after 伪元素用法
  • css前端知识点总结(必看篇)
  • CSS3实用方法总结(推荐)
  • 分享15个最佳的HTML/CSS设计和开发框架
  • Bootstrap3.0学习笔记之CSS相关补充

相关文章

  • 2017-08-06前端开发大众手册(包括工具、网址、经验等)
  • 2017-08-06IE环境规定div高度必须大于字体高度的问题
  • 2018-08-23想更好地掌控设计,你还需要懂得形状心理学
  • 2017-08-06Div与table的区别在速度和加载与网页应用等等中的差别介绍
  • 2018-08-23像鲶鱼一样的活着!成为设计师10年后的经验心得
  • 2017-08-06从image/x-png谈ContentType(s)
  • 2017-08-06浮动菜单,可实现上下滚动的效果
  • 2018-08-23超全面!从零开始帮你掌握2017年最热门的孟菲斯风格
  • 2018-08-23网易资深设计师:APP应用图标的36个设计方法
  • 2017-08-06Sublime Text—设置浏览器快捷键的方法推荐

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • noe4j之cypher之where
    • 18套精美的苹果风格免费图标素材分享
    • 重复提交、重复刷新、防止后退的问题以及处理方式分析
    • 「这个控件叫什么」系列之Picker/选择器/拾取器
    • 分享10个最新的Web前端框架(翻译)
    • 想引导用户?来学习UX中的承诺和行为一致性原则
    • 临摹练习后,我总结了5个图标绘制的实战技巧
    • 网站标准开发流程图
    • 网页宽度自动适应手机屏幕宽度的实现代码(viewport)
    • 如何学习Low Poly Style?来看这篇超全面的总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有