CSS样式优先级计算方法

   一、什么是CSS优先级?

  所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍不同的CSS规则。

  二、为什么要研究CSS优先级?CSS优先级与门户系统有什么关系?

  研究CSS优先级的主要目的就是解决多个CSS选择符选中同一个元素时的冲突问题。在门户系统中,为了保证所有的页面能正常展示,几乎所有的微件及页面都有基础CSS样式,但是门户系统是开放的、个性化的平台,大部分样式都给予了用户修改权,这时自定义样式和门户基本样式就有可能产生冲突,合理使用CSS优先级可以完美的解决这些冲突。

  三、CSS优先级规则

  ◎ 每个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 */

  ——后者胜出

  从这里可以总结一个整体的规则即 id>class>普通元素 , 同类选择符条件下层级越多的优先级越高。

  除了上面的specificity还有一些其他规则

  ◎ 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如

  blah

  的样式,而外部定义指经由或

时间: 2024-09-12 16:22:58

CSS样式优先级计算方法的相关文章

css样式优先级

>>style.html <!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title></title><!-- 引入外部样式 --><link rel="stylesheet" type="text/css" href="css/mai

CSS样式----图文详解:css样式表和选择器

主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择器.伪类选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷

CSS样式的优先级

css ---------------------------引用文字--------------------------------------样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 统计选择符中的ID属性个数. 统计选择符中的CLASS属性个数. 中国教程网--个人空间;统计选择符中的HTML标记名格式. 最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数.( 注意,你需要将数字转换成一个以三个数字结尾的更大的数).相应于选择符的最终数字列表可以很容易确定较

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=""定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如:     选择器 特殊性 (a,b,c,d) Sty

asp.net导入CSS样式,用不起

问题描述 asp.net导入CSS样式,用不起 asp.net我导入了CSS样式表,路径也是对的,但是样子一点也没用起 解决方案 使用ASP.NET直接控制CSS样式asp.net css 样式选择器,优先级在Asp.net中过滤html,javascript,css样式代码 解决方案二: 浏览器开发工具看你css文件路径是否正确,不是你说对就是对,要浏览器能正常加载才行

CSS样式表技巧总结

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

!important在ie6下的一个BUG和CSS的优先级。

在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的. 一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢

入门:在网页中使用CSS样式表的四种方法

css|网页|样式表 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下: <head> -- <link

用CSS样式描述表格Table边框

表格边框的处理是CSS网页布局中经常会遇到的内容,在webjx.com中也有过相关的介绍,除了将表格作为一个整体进行定义,您也可以将表格边框的四个部分分别进行定义,包括顶部.底部.左边和右边.列表B中的代码将刚才的例子中的表格分成四个部分单独定义.  <html><head><title>HTML Table</title></head><style type="text/css">TABLE { backgrou