一、继承性
所谓继承性，就是指被包含的元素将拥有外层元素的样式效果。继承性最典型的应用就是在默认样式的预设上。
我们来看一段的代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="herd" id="at">
<h3>
<a href="#">More>></a>
<span id="news">新闻动态</span>
</h3>
<div class="list">
<ul id="S2">
<li><a href="#">微信“阅读数”是怎么算的？</a><span>[7-25]</span></li>
<li><a href="#">微信“阅读数”是怎么算的？</a><span>[7-26]</span></li>
<li><a href="#">微信“阅读数”是怎么算的？</a><span>[7-27]</span></li>
</ul>
</div>
</div>
</body>
</html>
代码1
图1
如果我们想通过css给“新闻动态”添加红色并不影响其他的span标签，我们就可以用继承了
例如：
<style media="screen">
#at>h3>span{
color : red;
}
</style>代码2
效果如下：
图2
二、层叠性
层叠是css样式的基本特性之一，层叠性，简单点，就是可以有多个选择器或一个选择器对某个或某几个标签进行选择，如果多个选择器赋予它相同属性即要遵从优先级原则，它具有任意性。
我们来看（还是之前那个body）：
<style media="screen">
#at>h3>span{
color : red;
}
h3>span{
font-style: italic;
}
#news{
color:green;
}
</style>代码3
结果如下：
图3
三、优先级
刚刚我们已经接触过一点点优先级的相关知识，那么为什么图3的新闻动态字体是红色而不是绿色呢，让我们来探究一下吧
一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级
对于常规的选择器，他们拥有一个优先级加权值（以下简称权值），说明如下：
通配符选择器：权值为0；
标签选择器/伪元素或伪对象选择器：权值为1；
类选择器/属性选择器：权值为10；
id选择器：权值为100；
！important：权值为无穷大；
我们来看一个例子：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="herd" id="at">
<h3>
<a href="#">More>></a>
<span id="news">新闻动态</span>
</h3>
</body>
</html>
<style media="screen">
span{ /*标签选择器*/
color : red;
}
span{
font-style: italic;
color: green;
}
#news{ /*id选择器*/
font-style: normal;
}
</style>
代码4
效果如下：
图4
由此我们可以得出id选择器权值比标签选择器大，如果相等则较后的取代前面的。
然后，以上面权值为起点来计算每个样式中选择器的总权值，规则如下：
统计选择器中id选择器的个数，然后乘于100；
统计选择器中类选择器的个数，然后乘以10；
……
然后把得到的数值相加即可得到总权重。
现在我们就可以解释为什么新闻动态的字体是不是绿色的了
因为代码3
#at>h3>span
100 1 1 权值为102
#news
权值为100
4426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
