CSS层叠顺序

   当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

  ! important

  规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地,当网页制作者和读者都指定了重要规则时,网页制作者的规则会超越读者的。以下是! important 声明的例子:

  BODY { background: url(bar.gif) white;

  background-repeat: repeat-x ! important }

  Origin of Rules (Author's vs. Reader's)

  正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

  网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这样的用户会有可能声明确定的样式规则为! important,因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则,所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

  选择符规则: 计算特性

  基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

  统计选择符中的ID属性个数。

  统计选择符中的CLASS属性个数。

  统计选择符中的HTML标记名格式。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

  #id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */

  UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */

  LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */

  LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

  特性的顺序

  为了方便使用,当两个规则具同样权重时,取后面的那个。

时间: 2024-08-04 02:33:17

CSS层叠顺序的相关文章

CSS层叠样式的主次顺序

css 当使用了多个样式表,样式表需要争夺特定选择符的控制权.在这些情况下,总会有样式表的规则能获得控制权.以下的特性将决定互相对立的样式表的结果. 正如以前所提及的,网页制作者和读者都有能力去指定样式表.当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则.而网页制作者和读者的样式表都超越浏览器的内置样式表. 网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则.例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 所有题目汇总在我的 Github .   3.层叠顺序(stacking level)

CSS层叠样式的学习[2]

css 1.规则 选择符 任何HTML元素都可以是一个CSS1的选择符.选择符仅仅是指向特别样式的元素.例如, P { text-indent: 3em } 当中的选择符是P. 类选择符 单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式.例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : code.html { color: #191970 }code.css { color: #4b0082 } 以上的例子建立了两个类,css和html,供HTML的CODE元

写CSS文件的流程和CSS代码顺序

文章简介:css制作流程及标准. css制作流程及标准 (一)制作流程:1,创建文件(文件管理及命名)2,与html文档建立关系 注意点:    1)不建议使用:内联样式和内嵌样式         原因:结构(html)和表现(css样式)没有分离    2)区别:外链样式与导入样式(http://zhidao.baidu.com/question/198616109.html)    3)网站常用:外链样式 3,制作页面样式 注意点: 同html框架一致从上到下 从整体到局部 共用样式到个别样

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

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

xhtml+css网页布局是否要注意CSS书写顺序?

css|xhtml|网页 我们运用xhtml+css网页布局,实现表现与结构的分离,表现部分的css文件非常重要,也比较繁杂,我们在书写CSS文件时有很多属性和值,我们就考虑到了书写顺序的问题. 有时候是先写了margin或color,然后再写width和height等等.我们有没有必要让我们的编码更加的工整,更加的科学呢?实践证明,书写工整.按一定的规则进行书写是很有好处的. 下面是Mozilla Firefox所建议的CSS书写顺序,对我们的代码书写很有参考价值: * mozilla.org

淘宝的css属性顺序书写规范

很有启示作用,可以参考. 段正淳 from Taobao.com UED Team 以前部门的同事们,每个人都有一套书写的规范,导致看对方的css代码非常吃力,所以就推行了一套书写标准,或许对您也有帮助. *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align

firefox推荐与个人理解的css书写顺序_CSS/HTML

最近的工作中,遇到不少问题,其中一个问题我觉得是最重要的,那就是css的书写顺序,他可以体现一个前端工作者的思续.如果您看到本文,请不要再想到哪个属性就写哪个属性. 先来看一下firefox推荐的书写顺序 * mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Sugg

标准的css代码顺序写法

书写顺序和浏览器解析过程有关!浏览器先对dom定位,然后解析自身属性,然后再解析内部对象!//显示属性displaylist-stylepositionfloatclear //自身属性widthheightmarginpaddingborderbackground //文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent