CSS优先权与 执行顺序

css教程执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被css选择符选中时,就要按照优先权取舍不同的css规则,这其中涉及到的问题其实很多。
  首先就是css规则的specificity(特殊性),css2.1有一套关于specificity的计算方式,用一个四位的数字串(css2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则:
  每个id选择符(#someid),加 0,1,0,0。
  每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
  每个元素或伪元素(:firstchild)等,加0,0,0,1
  其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。
  按这些规则将数字串逐位相加,就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

  举一些例子吧:

h1 {color: red;} 
/* 只有一个普通元素加成,结果是 0,0,0,1 */
body h1 {color: green;} 
/* 两个普通元素加成,结果是 0,0,0,2 */ ——后者胜出       
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
h2 {color: silver;} 
/*一个普通元素,结果是 0,0,0,1 */ ——前者胜出       
html > body table tr[id=”totals”] td ul > li {color: maroon;} 
/* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */
li#answer {color: navy;} 
/* 一个id选择符,一个普通选择符,结果是0,1,0,1 */ ——后者胜出 
除了specificity还有一些其他规则

  文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style=”color: red”>blah</div>的样式,而外部定义指经由<link>或<style>标签定义的规则。
  有!important声明的规则高于一切。
  如果!important声明冲突,则比较优先权。
  如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
  由继承而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
关于经由@import载入的外部样式,由于@import必须出现在所有其他规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
  这里需要提一下ie,ie是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其他规则定义之前的,这可能会引发一些误会。

时间: 2024-08-03 02:02:57

CSS优先权与 执行顺序的相关文章

CSS规则的执行顺序(转)

你对CSS规则的执行顺序是否了解,这里和大家分享一下,若两条规则具有相同的权值.起源及特殊性,那在样式表中最后出现的规则优先. 1.CSS规则之特殊性 首先来看一下这个例子将会发生的情形: <style type="text/css"> .grape { color: Blue; } H1 { color: Red; } </style> <h1 class="grape"> Meerkat <em>Central &

CSS规则的执行顺序

1.特殊性 首先来看一下这个例子将会发生的情形: 以下是代码片段: .grape { color:Blue; }  H1 { color: Red; }  <h1 class="grape">Meerkat <em>Central</em></h1>   H1和.grape都匹配上面的H1元素,那么到底应该使用哪一个呢? 实践证明.grape是正确答案,把句子显示为蓝色. 根据规范,一般的HTML元素选择符(H1,P 等)具有特殊性1,类

CSS执行顺序与优先权的问题

核心提示:CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多. CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多. 首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终

CSS优先权详解

详解|css优先权 发现很多朋友对 CSS 的优先权不甚了解,规则很简单.需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权. Specificity 具体的计算规则: 元素的 style 样式属性,加 1,0,0,0. 每个 ID

探析浏览器执行JavaScript脚本加载与代码执行顺序_javascript技巧

本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)_jquery

俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们

jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较_jquery

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=

javascript的执行顺序

 JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行 如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜.   那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:   1.代码块 JavaScript中的代码块是指由<script>

SQLServer中SELECT语句的执行顺序

今天在写一条语句的时候,在查询分析器里边执行 要用10s,换用另外一种写法只用少于1s的时间,同事说是因为Sql句语执行顺序的原因.之前看过一点相 关的书,有一点印象,到网上找了资料,学习下. 逻辑查询处理步骤 复制代码 代码如下: (8)SELECT (9)DISTINCT (11)<TOP_specification> <select_list> (1)FROM <left_table> (3) <join_type> JOIN <right_ta