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

CSS2中从优先权重的计算方式来辨别下CSS

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

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

最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题,于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法,关于代码的测试,有兴趣的朋友可以按照计算方式单独编写代码进行测试,我这里就不写一堆堆了,单纯的从优先权重的计算方式来辨别下CSS

关于W3C标准中的计算 是将CSS的选择器分为四组 即 a b c d 每一个样式的缩写就成了 CSS{a,b,c,d} a表示内联样式 b是Id选择器 c是类元素 伪类以及其他一切非元素对象 d是元素

再确定哪条一条样式起作用的时候 参照的第一个原则是 a>b>c>d 比较的顺序就是 从左往右,可以理解为如果a 比较除了结果 就不再比较b 例如{0,6,3,3}和{1,3,3,3}总数上是第一条大 但是第二是一个内联样式 所以第二条起作用 第一条无效 以此类推 相继比较即可

除此之外还有几条规则 即同样的权重下 后面覆盖前面,这也可以理解为 同一个样式的简写声明中 同一个属性 如果你重复写了 那么后面的将覆盖掉前面的定义,如果有不明白或有不同看法的同学可以留言 欢迎讨论!

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

  • CSS2书写顺序包括位置属性、自身属性、文字系列
  • css实现的交互小三角箭头图标
  • CSS2中从优先权重的计算方式来辨别下CSS

相关文章

  • 2017-08-06css的语法介绍 css基础
  • 2017-08-06CSS :active 伪类 元素被激活时的样式
  • 2017-08-06网页制作中应用的50个CSS技巧(国外)
  • 2017-08-06更改上传按钮的样式示例
  • 2017-08-06css教程实现div背景色渐变色代码分享
  • 2017-08-06小数在各个浏览器的差异及css用小数解析差异解决浏览器兼容性问题
  • 2017-08-06Firefox专属hack的写法介绍
  • 2017-08-06前端工程师新手必读:掌握网页设计的基本技能和弄清设计的概念
  • 2017-08-06css实例教程 一款纯css实现的垂直时间线效果
  • 2017-08-06深入理解css中的margin属性(推荐)

文章分类

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

最近更新的内容

    • DIV CSS布局中position属性用法深入探究
    • 不使用class和id进行网页布局的方法
    • css中IE判断语句 if !IE
    • 前端工程师新手必读:掌握网页设计的基本技能和弄清设计的概念
    • 驯服CSS选择器
    • DIV背景图片在Firefox下不显示通过overflow:auto可解决
    • CSS3制作ajax loader icon实现思路及代码
    • 利用清晰的移动应用表单的设计来抓住用户
    • 目前比较全面的浏览器CSS BUG兼容汇总
    • css的pointer鼠标类型详解(支持IE,firefox,chrome)

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

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