转自CSS优先级的计算公式:http://wyz.67ge.com/css-selector-priority/

通常我们可以将CSS的优先级由高到低分为六组:

  1. 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。
  2. 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。
  3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
  4. 第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
  5. 第五级由一个或多个 类型选择器定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。
  6. 最低一级的选择器是为一个通配选择器,用*{margin:10px;}这样的类型来定义。

另外,可以用一句极为简单的话来描述CSS优先级问题:当一个CSS选择器拥有更多的高级别属性时,它的优先级就会比较高。如 #i100 *.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{} ,这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个,当然前者优先级会比较高。

CSS选择器是一个非常灵活的CSS属性,优雅的使用它会使你的页面代码不再臃肿,而且还可以作为hack的妙用方法之一。

当比较多个相同级别的CSS选择器优先级时,它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级:

  1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
  2. 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
  3. 第三级的优先属性由<link/>标签所引入的样式表定义。
  4. 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
  5. 第五级优先的样式有用户设定。
  6. 最低级的优先权由浏览器默认。

CSS选择器及优先级的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. CSS选择器、优先级与匹配原理(转)

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载:详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. (转)css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  8. CSS 选择器及优先级

    CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...

  9. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  10. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. hive的行列互转

    行转列 多行转多列 数据表 row2col col1 col2 col3 a c 1 a d 2 a e 3 b c 4 b d 5 b e 6 现在要将其转化为: col1 c d e a 1 2 ...

  2. A1075 PAT Judge (25 分)

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  3. Dijkstra with priority queue 分类: ACM TYPE 2015-07-23 20:12 4人阅读 评论(0) 收藏

    POJ 1511 Invitation Cards(单源最短路,优先队列优化的Dijkstra) //================================================= ...

  4. 20-Ubuntu-文件和目录命令-查看目录树型结构-tree

    tree 以树状图列出当前目录下的文件目录结构 选项 含义 -d 只显示当前目录的子目录树型结构   显示当前目录的子目录和文件树型结构 例: 1.查看文档目录下的子目录和文件树型结构 2.查看文档目 ...

  5. hive sparksession查询只显示defalt库问题

    1.spark环境记得拷贝进hive.xml 2.SparkSession.builder().enableHiveSupport()记得加上enableHiveSupport 3.window记得w ...

  6. 一个好的mvc5+ef6的学习地址

    链接地址: MVC5 + EF6 入门完整教程  感谢这位博主的无私奉献 文章目录列表:http://www.cnblogs.com/miro/p/3777960.html#3673688

  7. 2019-6-23-WPF-解决弹出模态窗口关闭后,主窗口不在最前

    title author date CreateTime categories WPF 解决弹出模态窗口关闭后,主窗口不在最前 lindexi 2019-06-23 11:48:38 +0800 20 ...

  8. SQLserver执行命令

    方法一:xp_cmdshell  exec master..xp_cmdshell "whoami"默认执行是关闭 EXEC sp_configure 'show advanced ...

  9. YARN设计思路

  10. Linux sed命令实现替换文本内容

    /root/data/code-s3201/publish_codex/deploy/db.properties db.properties中的 1.0.0.6 替换为 1.0.0.7 sed -i ...