.CSS高级特性
1.继承性
所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在<body>标记的子标记。
继承性非常有用，它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父元素即可，如下面的代码：
p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;}
就可以写成：
body{color:black;}
第二种写法可以达到相同的控制效果，且代码更简洁。
恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。并不是所有的CSS属性都可以继承，如下面这些属性就不具有继承性：
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性
注意：
当为body元素设置字号属性时，标题文本不会采用这个样式，读者可能会认为标题没有继承文本字号，这种想法是不正确的，标题文本之所以不采用body元素设置的字号，是因为标题标记h1~h6有默认字号样式，这时默认字号覆盖了继承的字号。
2.CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。
使用不同的选择器对用一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。其实CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。这样id选择器就具有最大的优先级。
对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重的叠加。
p strong{color:black;} /权重为：1+1/
strong.blue{color:green;} /权重为：1+10/
.father strong{color:yellow} /权重为：10+1/
p.father strong{color:orange;} /权重为：1+10+1/
p.father .blue{color:gold;} /权重为：1+10+10/
#header strong{color:pink;} /权重为：100+1/
#header strong.blue{color:red;} /权重为：100+1+10/
对应HTML结构为：
文本的颜色
这时页面文本应为权重最高的样式，即为红色。在考虑权重的时候还应注意一些特殊情况。
继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近，!important都具有最大优先级。
需要注意的是，复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。
``课堂作业
<!doctype html>
<div><div><div><div><div><div><div><div><div>
<div class="inner">文本的样式</div>
</div></div></div></div></div></div></div></div></div>
这时可以使用后代选择器或类选择器定义最里层div的样式。如果仅仅将基础选择器的权重相加，后代选择器div div div div div div div div div div div（包含11层div）的权重为11，大于类选择器.inner的权重10，文本将添加下划线。
<!DOCTYPE html>
新浪博客首页——新浪网
新浪网博客频道是全中国最主流，最具人气的博客频道。
拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。
blog.sina.com.cn/2014-07-07-百度快照-评价
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新浪</title>
<style type="text/css">
.h2{font: 24px 黑体;
color: #FF0000;
text-align: left;
text-decoration: underline;}
.bule{color: blue;}
.red{color: #FF0000;}
.p{font: 14px 楷体;
color: black;
text-align: left;}
.green{color: darkgreen;}
.black{font: 14px 宋体;
color: #000000;
text-decoration: underline;}
</style>
</head>
<body>
<h2 class="h2">新浪<em class="bule">博客首页——</em>新浪网</h2>
<p class="p"><em class="red">新浪网</em>博客频道是全中国最主流，最具人气的博客频道。<br>
拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。</p>
<p><em class="green">
blog.sina.com.cn/2014-07-07</em><em class="black">-百度快照-评价</em></p>
</body>
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
