用层叠管理多样式(Managing Multiple Styles: The Cascade)

来源：互联网发布：linux file 头文件编辑：程序博客网时间：2024/06/05 07:10

内容参考自《CSS实践手册》第二版

层叠是决定哪些样式属性要被应用到元素的一套规则。

继承样式的叠加

<html><head><title>Hello world!</title><style type="text/css">body {font-family:Arial, Helvetica, sans-serif;}p {color:#00F;}strong {font-size:15px;}</style></head><body><p>    <strong>Hello world!</strong></p></body></html>

标签嵌套在段落里面，这个段落又处在<body>里面，于是标签就会从它的两个祖先处得到继承，因此它从body处继承了font-family(字体)属性，又从父级段落处继承了color(颜色)属性，此外标签直接应用了font-size属性，所以标签的样式为

strong {font-family:Arial, Helvetica, sans-serif;color:#00F;font-size:15px;}

最近的祖先样式先胜出

如果body标签和段落标签都设置了color属性，则标签会继承段落处的color属性

直接应用的样式胜出
如果body标签和段落标签和标签都设置了color属性，样式比body标签和段落标签更具体

用权重值决定哪种样式——最具体的样式中的属性会胜出
一个标签选择器值1分
一个类选择器值10分
一个ID选择器值100分
一个内建样式值1000分
（这个计算在大多数情况下适用）
伪元素(如 :first-line)通常被当作标签选择器
伪类(如: :link)通常被当作类对待
一个标签多个样式则对其值求和
个人觉得用位数来说明更清楚，权重值用ABC来表示(a代表ID，b代表类，c代表标签)，在相应的位数上加1

如
p(标签)，权重值为001
.footer(类)，权重值为010
#main(ID)，权重值为100
div .footer，div为标签，在C位上加1，.footer为类，在B位上加1 权重值为011
div#main，权重值为101
div#main div.footer,权重值为211

权重值相同时最后一个样式胜出
主要看样式表在HTML中的位置了

忽略权重值
在属性后使用!important(注意IE6无效)