CSS层叠与继承用法手册
本文向大家描述一下CSS层叠与继承的用法,个元素可能同时被多个CSS选择器选中,每个选择器都有一些CSS规则,这就是层叠,而继承得来的规则没有特殊性。

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了莲都免费建站欢迎大家使用!
CSS层叠与继承
一、CSS层叠
我们知道文档中的一个元素可能同时被多个CSS选择器选中,每个选择器都有一些CSS规则,这就是层叠。这些规则有可能不矛盾的,自然这些规则将会同时起效,然而有些规则是相互冲突的,例如:
ExampleSourceCode
- CSSCascade title>
- h1{color:Red;}
- bodyh1{color:Blue;}
- style>
- head>
Hellodiv-CSS.net h1>
- body>
- html>
为此需要为每条规则制定特殊性,当发生冲突的时候必须选出一条最高特殊性的规则来应用。CSS规则的特殊性可以用4个整数来表示,例如0,0,0,0.计算规则如下:
对于规则中的每个ID选择符,特殊性加0,1,0,0
对于规则中每个类选择符和属性选择符以及伪类,特殊性加0,0,1,0
对于规则中的每个元素名或者伪元素,特殊性加0,0,0,1
对于通配符,特殊性加0,0,0,0.
对于内联规则,特殊性加1,0,0,0
最终得到结果就是这个规则的特殊性。两个特殊性的比较类似字符串大小的比较,是从左往右依次比较,第一个数字大的规则的特殊性高。上例中两条规则的特殊性分别是0,0,0,1和0,0,0,2,显然第二条胜出,因此最终字是蓝色的。
注意,通配符的特殊性0,0,0,0看起来没有作用,实际上不是,还有一种没有特殊性的规则,0,0,0,0要比没有特殊性更特殊,下面会介绍。
CSS还有一个!important标签,用来改变CSS规则的特殊性。实际上,在解析CSS规则特殊性的时候,是将具有!important的规则和没有此标签的规则利用上述方法分别计算特殊性,分别选出特殊性最高的规则。最终合并的时候,具有任何特殊性的带有!important标记的规则胜出。#p#
二、CSS继承
所谓继承,就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。继承得来的规则没有特殊性。下面看一个简单的例子:
ExampleSourceCode
- CSSCascade title>
- *{color:Blue;}
- div{color:Black;}
- .imp{color:Red!important;}
- #content{color:Green;}
- style>
- head>
Hello
div-CSS.net span> div>
- Title p>
- ContentGoesHere.
- div>
- body>
- html>
注意,第一行的CSS并没有继承div的黑色,这是因为通配符的缘故。通配符的特殊性虽然是全0,但是还是比继承的特殊性要高。第二行展示了!important标记的作用。
另外,一些明显不应该继承的属性,比如border,margin,padding之类的是不会被继承的,具体可以参考CSS手册。
三、其他
虽然有4个整数来表示一个特殊性,仍然有可能出现两条冲突的规则的特殊性完全一致的情况,此时就按照CSS规则出现的顺序来确定,在样式表中最后一个出现的规则胜出。一般不会出现这样的情况,只有一个情况例外,考虑如下样式表:
ExampleSourceCode
- :active{color:Red;}
- :hover{color:Blue;}
- :visited{color:Purple;}
- :link{color:Green;}
这样页面中的链接永远也不会显示红色和蓝色,因为一个链接要么被访问过,要么没有被访问过。而这两条规则在最后,因此总会胜出。如果改成这样:
ExampleSourceCode
- :link{color:Green;}
- :visited{color:Purple;}
- :hover{color:Blue;}
- :active{color:Red;}
就能实现鼠标悬停和点击的瞬间变色的效果。这样的顺序的首字母正好连成“LoVeHA”,这样的顺序被约定俗成的叫做LoveHa规则。特殊性规则从理论上讲比较抽象和难懂,但在实践中,只要样式表是设计良好的,并不会有太多这方面的困扰,因此本文也不再做深究,更多的技术请参考div-CSS.net的文章更新!
文章来源:Div-CSS.net设计网参考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=9998
本文题目:CSS层叠与继承用法手册
文章转载:http://www.bluegullmedia.com/article/dhepeeg.html
基本
文件
流程
错误
SQL
调试
- 请求信息 : 2026-03-23 13:33:24 HTTP/1.1 GET : /article/dhepeeg.html
- 运行时间 : 0.0457s ( Load:0.0021s Init:0.0010s Exec:0.0294s Template:0.0132s )
- 吞吐率 : 21.88req/s
- 内存开销 : 525.66 kb
- 查询信息 : 12 queries 5 writes
- 文件加载 : 36
- 缓存信息 : 0 gets 0 writes
- 配置加载 : 130
- 会话信息 : SESSION_ID=k9hpv2ui9vbvijvdnk67f4p0i5
- /home/wwwroot/bluegullmedia/wwwroot/index.php ( 1.09 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/ThinkPHP.php ( 4.61 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Think.class.php ( 12.26 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Storage.class.php ( 1.37 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Storage/Driver/File.class.php ( 3.52 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Mode/common.php ( 2.82 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Common/functions.php ( 53.56 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Hook.class.php ( 4.01 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/App.class.php ( 13.49 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Dispatcher.class.php ( 14.79 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Route.class.php ( 13.36 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Controller.class.php ( 11.23 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/View.class.php ( 7.59 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/BuildLiteBehavior.class.php ( 3.68 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/ParseTemplateBehavior.class.php ( 3.88 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/ContentReplaceBehavior.class.php ( 1.91 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Conf/convention.php ( 11.15 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Common/Conf/config.php ( 2.16 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Lang/zh-cn.php ( 2.55 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Conf/debug.php ( 1.49 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Home/Conf/config.php ( 0.31 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Home/Common/function.php ( 3.33 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/ReadHtmlCacheBehavior.class.php ( 5.62 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Home/Controller/ArticleController.class.php ( 6.02 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Home/Controller/CommController.class.php ( 1.60 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Model.class.php ( 60.11 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Db.class.php ( 32.43 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Db/Driver/Pdo.class.php ( 16.74 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Cache.class.php ( 3.83 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Cache/Driver/File.class.php ( 5.87 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Template.class.php ( 28.16 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Template/TagLib/Cx.class.php ( 22.40 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Template/TagLib.class.php ( 9.16 KB )
- /home/wwwroot/bluegullmedia/wwwroot/App/Runtime/Cache/Home/7540f392f42b28b481b30614275e4e55.php ( 18.20 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/WriteHtmlCacheBehavior.class.php ( 0.97 KB )
- /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Behavior/ShowPageTraceBehavior.class.php ( 5.24 KB )
- [ app_init ] --START--
- Run Behavior\BuildLiteBehavior [ RunTime:0.000016s ]
- [ app_init ] --END-- [ RunTime:0.000090s ]
- [ app_begin ] --START--
- Run Behavior\ReadHtmlCacheBehavior [ RunTime:0.000105s ]
- [ app_begin ] --END-- [ RunTime:0.000160s ]
- [ view_parse ] --START--
- [ template_filter ] --START--
- Run Behavior\ContentReplaceBehavior [ RunTime:0.000142s ]
- [ template_filter ] --END-- [ RunTime:0.000212s ]
- Run Behavior\ParseTemplateBehavior [ RunTime:0.012240s ]
- [ view_parse ] --END-- [ RunTime:0.012311s ]
- [ view_filter ] --START--
- Run Behavior\WriteHtmlCacheBehavior [ RunTime:0.000101s ]
- [ view_filter ] --END-- [ RunTime:0.000126s ]
- [ app_end ] --START--
- 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`pid`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1
- 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1
- 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( pid= )
- [8] Undefined index: pid /home/wwwroot/bluegullmedia/wwwroot/App/Home/Controller/ArticleController.class.php 第 47 行.
- [2] mkdir(): Permission denied /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Cache/Driver/File.class.php 第 59 行.
- [2] mkdir(): Permission denied /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Cache/Driver/File.class.php 第 59 行.
- [8] Undefined index: db_host /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Db.class.php 第 120 行.
- [8] Undefined index: db_port /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Db.class.php 第 121 行.
- [8] Undefined index: db_name /home/wwwroot/bluegullmedia/wwwroot/ThinkPHP/Library/Think/Db.class.php 第 122 行.

0.0457s
