• 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作一个简单的说明: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,后面会解释。

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

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

选择符 特性值
h1 {color:blue;} 1
p em {color:purple;} 2
.apple {color:red;} 10
p.bright {color:yellow;} 11
p.bright em.dark {color:brown;} 22
#id316 {color:yellow} 100

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

选择符 特性值
h1 {color:blue;} 1
p em {color:purple;} 1+1=2
.apple {color:red;} 10
p.bright {color:yellow;} 1+10=11
p.bright em.dark {color:brown;} 1+10+1+10=22
#id316 {color:yellow} 100

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

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

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

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

网页中加载多个css样式文件,其中一个是Ext库自带的样式文件,里面对所有标签定义了一些样式,导致原有网页显示不正确。通过找到对应样式,重新设置了正确的样式。将新样式加到body标签上,但是出现两个样式,Ext样式仍然有效。最后发现时在设置新样式的时候没有加*,导致只对body标签有用,而对子标签无效。下面为修改后的样式

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

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

相关文章

  • 2018-08-23内部教程!超详细的支付宝设计规范之配色篇
  • 2017-08-06正确的空链接写法 防止点击后页面会跳动问题 a href #号问题
  • 2018-08-23用YouTube 为例,让你轻松读懂交互设计7大定律!
  • 2017-08-06css sprites技术将多个背景集成到一个png图片上css定位
  • 2017-08-06不是所有弹窗都是流氓 关于网站弹窗的设计技巧
  • 2018-08-23动手试试!手把手教你如何适配 iPhone X
  • 2018-08-23学会这5个PS小技巧,让工作效率提高5倍!
  • 2018-08-23高手的后期课堂!聊聊人像磨皮的基础原理
  • 2018-08-23镜头后的趋势!EyeEm 2017年春夏视觉时尚趋势报告
  • 2017-08-06鼠标经过图片超链接时改变图片的大小(宽、高)的css

文章分类

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

最近更新的内容

    • 自适应网页设计是怎么做到的的相关知识点总结
    • 腾讯干货!虚拟To B支付设计研究之设计思考篇
    • UI新手必备!iOS+Android的切图与标注方法
    • 入门好文!电商首屏页的基础知识科普+技巧总结
    • 我们观察到,2018年网页文本字体的设计趋势有这7种
    • 网易资深设计师:视觉设计如何继承品牌基因?
    • 设计好用、易用web应用程序的10个技巧
    • 对话腾讯设计师:微信车票背后的设计故事
    • 在谷歌当了半年设计师,我学到这些经验
    • 豆瓣9.0分的《我不是药神》,海报也是超高分!

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

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