例：p{color;blue;}
<p>我爱<span>前端开发</span>。</p>
显示的效果为：p中的文本和span中的文本都被设置为了蓝色，即<span>标签继承了<p>标签的样式（注：有些CSS样式是不具有继承性的，如：边框、边界、背景、定位、布局等）
注：继承的好处在于恰当地使用继承可以减少代码中的选择器数量，降低复杂性，但如果大量元素继承各种样式的话，那么在判断样式的来源时将会变得十分的困难。
CSS特殊性、重要性、层叠：看来很多网上的文章，貌似很多人对着几个性质的理解都是对书籍上面的原话进行复制粘贴，没有自己原话的理解，按我个人的理解，这3个属性应该放在一起进行讨论比较以便于理解，因为在我看来这3个性质虽然有所不同但却又相互关联的，共同点都是讨论和解决当同一个元素在面对多个样式出现冲突时，元素最终是以哪个样式为标准进行显示？
先说特殊性：什么是特殊性呢？在CSS中，选择元素可以有很多种规则，而每种规则都有自己的选择器，对于同一个元素而言，当有两种或者两种以上的规则来进行选择时，最终到底是哪一种规则胜出呢？：
例：h1{color:red;}
body h1{color:blue;}
例子中h1最后是以哪一种颜色显示呢？答案是通过计算和比较每种规则的特殊性的权重值，将每个规则里面的选择器的权重值进行相加，然后通过比较相加的结果，最后特殊性权重值最高的规则胜出。
注：1.标签的权值为1，类选择器的权值为10，id选择器的权值最高为100；
2.通用选择器的特殊性为0；
3.继承完全没有特殊性！
4.o特殊性也比没有特殊性的优先值高！
需要注意的是：当应用于同一元素时，内联样式声明的特殊性要高于id选择器声明的特殊性：
例：h1 #swarp{color:red;}
<h1 id="swarp" style="color:blue;">WEB</h1>
最终“WEB”的颜色为蓝色。
同样，当应用于同一元素时，内部样式声明的特殊性也比id选择器要高：
例：<style type="text/css">
#content{color:red;}
p{color:blue;}
</style>
</head>
<body>
<div id="content">
<p>WEB</p>
</div>
</body>
最终“WEB”的颜色也为蓝色。
说一下重要性：有时候某个样式声明可能非常重要，超过了其他的声明，需要给它赋予最高的权重值，这时候就要用到重要性声明：!important
p{color:red!important;}
需要注意的是:
1.!important必须要写在属性的分号之前才能起作用，尤其是该属性有多个关键词语时，否则无效！
2.声明权重：读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明
接下来讲层叠：由上面我们知道特殊性解决的是当用不同特殊性的规则来选择元素时最终哪一种规则会胜出的问题，而如果两个或者多个特殊性相同的规则应用于同一个元素时，那么这个问题和冲突又该如何解决呢？这时就需要运用到层叠了。那什么是层叠呢？：层叠是指CSS中对同一个元素或者同一个网页应用多个样式或者样式表的能力，当这些具有相同权重值的样式同时应用于同一个元素时，处于最后的样式将会被应用：
例：p{color:red;}
p{color:blue;}
<p>我爱前端</p>
最终“我爱前端”的颜色为蓝色
所以对于前面样式的优先级就比较好理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
另外一个优先级也要注意，也就是关于链接的 ：a:link>a:visited>a:hover>a:focus>a:active
总结：由上面我们可以知道，特殊性、重要性以及层叠都是用来解决当多个样式应用于同一元素时出现的冲突问题。当不同特殊性的样式应用于同一元素时，我们需要用到特殊性，根据不同的特殊性的权重值来判断，同时还要注意内联式声明的特殊性要高于id选择器声明的特殊性，另外如果有重要性的出现的情况也要考虑；而当多个特殊性权值相同的样式应用于同一元素时，需要用层叠去解决，同样如果有重要性出现的情况也要注意。所以在解决多个样式出现冲突时，不能只考虑特殊性或者还是层叠的问题，应该要结合着来看，按权重、来源、特殊性和顺序排序。
（PS：以上是自己的个人感悟，不知道这样总结和理解的对不对？欢迎各位能一起讨论，指出理解得错误的地方以及不足之处，谢谢！）
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
