CSS中的继承性和层叠性浅析
继承性：
为了引入继承性，我们先来看下面的代码：
... div{
color:red;
border:5px solid red;
}...
段落
发现作为div后代的p属性，只能继承父类的文字属性：这些属性包括：color、 text-开头的、line-开头的、font-开头的。
但是像盒子、定位、布局等这些均不可以被子类继承；
层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
id的数量，类的数量，标签的数量
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
实际上：
每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。其中的行内样式，指的是html文档中定义的style
行内样式包含在你的html中 对你的元素产生直接作用，比如:
header
- :after//页面元素内部
之后添加新内容 - :before//页面元素内部
之前添加新内容 - :first-letter //首字母
- :first-line //首行
- :selecton
伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如hover，active等等，而CSS 伪元素用于向某些选择器设置特殊效果，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。比如:first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
如：
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
又如：
段落
注意，伪元素选择器选择出来的“部分” 不在dom里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。 永远记得 伪元素生成的是“表现”。
那么，怎么计算权重呢？
方法一：
权重记忆口诀：
从0开始，一个行内样式+1000；
一个id+100；
一个属性选择器/class或者伪类+10；
一个元素名或者伪元素+1.
如：
方法二：
计算有几个id选择器的数量为a ,计算其他属性跟class选择器的数量为b ，计算元素名跟伪元素名的数量为c ，然后结合起来就是权重。
权重的基本规则
1、相同的权重：以后面出现的选择器为最后规则：
假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式：
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
两个选择器的权重都是0，1，0，1，最后那个规则生效。
2、不同的权重，权重值高则生效
权重比较规则：
1、包含更高权重选择器的一条规则拥有更高的权重。
2、Id选择器的权重比属性选择器高,比如下面的例子里 样式表中#p123的权重明显比[id=p123]的权重要
a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }3、带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器。
如：
ul li{color:red}
ul{color:red}上比下权重高；
4、与元素“挨得近”的规则生效，比如css中我们定义了以下的规则。
比如在CSS中定义了以下规则：
#content h1 {
padding: 5px;
}在html中也定义了：
5、最后定义的这条规则会覆盖上面与之冲突的规则。比如下面的例子：
p { color: red; background: yellow }
p { color: green }段落会呈现绿色的文字。当然也会出现黄色的背景，因为第一条规则只是被覆盖了color属性。
6、无论多少个元素组成的选择器，都没有一个class选择器权重高。比如说“.introduction”高于“html body div div h2 p”。
7、通配符选择器也有权重，权重被认为是 0，0，0，0。比如 *， body * 被继承的css属性也带有权重，权重是0，0，0，0。
8、！important语句表示无穷大：
下面举几个例子：
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的：
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
正确的做法是：（非常重要）
所以为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。
继承性造成的影响
这里需要声明一点：
如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
为了验证上面这句话，我们来看看下面这样的例子：
层叠性：权重计算的问题大总结（非常重要）
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
通过列举上面几个例子，我们对权重问题做一个总结。
本文转自： http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
借鉴于：点击打开链接