CSS03样式继承与层叠
原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/taotaoyouarebaby/article/details/8764521
继承：
指应用在一个标签上的CSS属性被传到嵌套标签上的过程。
|
body{ font-family: Arial, Serif; } |
body的子标签就能够继承body的字体属性。
继承的优先级：
最近的祖先样式胜出。
直接应用的样式胜出。
//html结构
|
<body> <p> <strong></strong> </p> </body> |
//css内容
|
body{font-family: Arial; color:#FF99BA;} p{color: #616161; font-size:18px;} strong{font-size: 24px; font-family:Times;} |
p将只会继承body的font-family属性；strong只会继承p的color属性。
层叠：
样式的属性就用规则。指定浏览器如何处理同一标签中应用的多个样式（样式冲突）。
属性冲突规则（同一标签的多个样式）：优先级
1. 权重大的胜出。
2. 相同权重：后导入的样式>先导入的样式。
权重：www.w3.org/TR/CSS21/cascade.html#specificity
|
样式类别 |
权重 |
|
标签样式、伪元素(eg:first-line) |
1 |
|
类样式、伪类(eg:link) |
10 |
|
ID样式 |
100 |
|
派生样式 |
所涉及样式的权重总和。 |
|
内联样式（行内样式） |
1000 |
|
属性后加!important，IE6不支持。 |
在该属性上忽略权重值。利用此处的属性值。 |
内联样式：
|
A：<span id="demo" style="color:red "></span> document.getElementById("demo").style.color="red";这两者属于同一级别，不过一般情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，因为往往DOM操作是在DOM树加载完毕之后。 |
！important
|
#nav a{color:red;} /*权重本大于下面的标签选择器*/ a{color:blue !important;} /*则所有a元素都为blue.*/ |
示例：
|
selector |
id |
class |
tag |
total权重 |
|
p |
0 |
0 |
1 |
1 |
|
.byline |
0 |
1 |
0 |
10 |
|
p.byline |
0 |
1 |
1 |
11 |
|
#banner |
1 |
0 |
0 |
100 |
|
#banner p |
1 |
0 |
1 |
101 |
|
#banner .byline |
1 |
1 |
0 |
110 |
|
a:link |
0 |
1 |
1 |
11 |
|
p:first-line |
0 |
0 |
2 |
2 |
|
h2 strong |
0 |
0 |
2 |
2 |
|
#wrapper #content .byline a:hover |
2 |
2 |
1 |
221 |
工具：Firefox扩展:View Formatted Source(https://addons.mozilla.org/zh-cn/firefox/
addon/view-formatted-source-format-s/).
，继承来的属性没有权重，或者说是权重为0。
选择性覆盖
网站全局样式(global.css)设置了h1，但在主页想修改h1(home.css)。
|
<link rel=”stylesheet” type=”text/css” href=”global.css” /> <link rel=”stylesheet” type=”text/css” href=”home.css” /> |
原理：规则2.
CSS reset(浏览器内建样式重置)：
//reset.css
|
/* reset browser styles */ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } ol { margin-left: 1.4em; list-style: decimal; } ul { margin-left: 1.4em; list-style:square; } img { border: 0; } /* end reset browser styles */ |