CSS样式的优先级

css

---------------------------引用文字--------------------------------------
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。 中国教程网--个人空间;
统计选择符中的HTML标记名格式。

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

以下是一个按特性分类的选择符的列表:

H1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:11
P.bright EM.dark {color:brown;} 特性值为:22
#id316 {color:yellow} 特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。
-------------------------------------------------------------------------

可能不太好理解,按照上面的权重顺序,先统计ID,再统计CLASS,再统计HTML标记。即:

-------------------------------------------------------------------------
tH1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:1+1=2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:10+1=11
P.bright EM.dark {color:brown;} 特性值为:10+10+1+1=22
#id316 {color:yellow} 特性值为:100
-------------------------------------------------------------------------

可以看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了继承的权重为0。

文章中提到一个小技巧:

---------------------------------引用文字---------------------------------
如果想让H1始终为黑色,而EM文字在其他情况下红色,那么下面的样式表设置就是一个很好的方法:

H1,H1 EM {color:black;} 特性值为:1,2
EM {color:red;} 特性值为:1

给定这个规则后,除在H1元素内的任何EM文字就都是红色,而H1内的EM文字仍旧为黑色,由于其选择符分组,在第一条规则中就有两条有效的规则(一条是对H1的,另一条是对H1 EM的)也就有两个特性值——每条规则一个。
-------------------------------------------------------------------------

这个技巧很有意思,HTML是这样的:

-------------------------------HTML--------------------------------------
<H1>黑色的H1<EM>黑色的EM</EM></H1>
<EM>红色的EM</EM>
-------------------------------------------------------------------------

也许你会说是不是跟上面的CSS样式顺序有关系呢?可以试试改成:

---------------------------------改后样式--------------------------------
EM {color:red;} 特性值为:1
H1,H1 EM {color:black;} 特性值为:1,2
-------------------------------------------------------------------------

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写样式时是很有帮助的,比如我们可以在定义列表的时候用到:

-------------------------------------------------------------------------
ul{color:red;}
ul li{6jGuestul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;}
-------------------------------------------------------------------------

这样就可以在不用增加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了

时间: 2024-10-15 04:57:18

CSS样式的优先级的相关文章

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

CSS样式优先级计算方法

  一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍不同的CSS规则. 二.为什么要研究CSS优先级?CSS优先级与门户系统有什么关系? 研究CSS优先级的主要目的就是解决多个CSS选择符选中同一个元素时的冲突问题.在门户系统中,为了保证所有的页面能正常展示,几乎所有的微件及页面都有基础CSS样式,但是门户系统是开放的.个性化的平台,大部分样式都给予了用户修改权,这时自定义样式和门户基本样式

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

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

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

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

CSS样式表技巧总结

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

CSS实例教程:CSS Selector的优先级

文章简介:11个class与一个id"谁的优先级高的问题. 上周五下班前我们敬爱的三三大人又在组里讨论了关于"11个class与一个id"谁的优先级高的问题-_-! 猜一下 01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <style type="text/css"> 06 body{fon

WEB设计中CSS样式表应用小技巧十四例

css|web|技巧|设计|样式表     CSS是Cascading style Sheets的简称,中文译作"层叠样式表单",我把它叫作"层叠样式表",我感到这样顺口一点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找.不管你用什么工具软件制作网页,都有在有意无意地使用CSS.用

入门:在网页中使用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