HTML技巧之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-10-21 23:50:03

HTML技巧之CSS的优先权的相关文章

CSS的优先权解释示例:为什么我定义的样式没有作用呢

这里你无法用.aa定义到li 遇到这种情况怎么解决呢?答案是提高.aa 的优先权 比如#aa ul li.aa 优先权相关文章参考-baidu搜索关键词: CSS的优先权 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

CSS的优先权

css 看到CSSer上贴了aoao的一篇帖子:Wonder CSS 专题 1:从零开始认识 CSS,其中说到了一些关于CSS的优先权的问题,但说得比较大概,我想再系统一下. 优先权问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多. 首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终specifici

网页制作技巧总结:CSS居中大全代码

文章简介:CSS 居中大全 我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:"居中一共有几种写法"呢,哈哈,先备着吧~~ 各种方法各有利弊,大家自己权衡吧,至少在需要居中时多个思路. <center> 不建议用了. text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 verti

css优先权:css 的优先权[转载]

文章有些老,但很具有参考价值.编者注.优先权问题其实就是一个冲突解决的问题,当同一个元素(或内容)被css选择符选中时,就要按照优先权取舍不同的css规则,这其中涉及到的问题其实很多.首先就是css规则的specificity(特殊性),css2.1有一套关于specificity的计算方式,用一个四位的数字串(css2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势.关于specificity的具体计算在各种情况下的数字加成有如下一般规则:每个id选择符(

学习网页技巧:css布局中的居中问题

css|技巧|网页|问题 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

技巧:css星级效果总结

css|技巧 用纯css打造星级评分效果正在被越来越多地应用在网络RIA中,结合ajax等技术,可以渲染出很出色的视觉效果和很棒的用户体验,在这篇文章开始之前,大家可以先去cssheaven感受一下. 最近由于项目需要,我在网上找了很多css星级评分的例子和说明,但是发现大多数都是翻译国外的文章,而且解释得并不是非常清楚,所以我决定自己来做一个总结,也希望能够给大家一些帮助. 首先用中文写一下这个效果的算法:1. 使用背景图片的位置切换来获得星级效果: 2. 整个效果最关键的地方就是"三层理论&

总结技巧:CSS Hack汇总快查

css|技巧 屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px  !important;} /*FF的专用*/select:empty {font:12px  !important;} /*safari可见*/这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html  {-}当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html  {-}这个地方要特别注意

标准网页制作技巧:CSS整体布局声明的一些用法

css|标准|技巧|网页 我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * {margin:0;padding:0;font-size:0.8em;...} 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必

小技巧:CSS 选择符有哪些?如何合理运用?

css|技巧 CSS selector 选择符是我们进行CSS网页布局的基础.CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读. HTML selector 标签选择符 HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义