有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变
这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？
所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则
（1）内联样式 > 内部样式表 / 外部样式表
<!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; } /* 内部样式表 */
</style>
</head>
<body>
<div style="color: green;" id="title"> <!-- 内联样式 -->
Hello World
</div>
</body>
</html>
【最终效果（内联样式 优先）】Hello World
（2）在内部样式表 / 外部样式表中，直接指定的样式 > 继承祖先的样式
<!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; }
span { color: green; } /* 直接指定 span 标签样式 */
</style>
</head>
<body>
<div id="title">
<span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 -->
</div>
</body>
</html>
【最终效果（直接指定的样式 优先）】Hello World
（3）对于直接指定的样式，权值大的优先；如果权值相同，后定义的优先【重要】
当直接指定的样式发生冲突时，根据定义该样式的选择器的权值大小进行比较，权值大的优先
选择器的权值计算定义如下：
- id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同
- 后代选择器的权值等于其包含的各级选择器的权值之和
<!DOCTYPE HTML>
<html>
<head>
<style>
#title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */
#intro { color: green; } /* id 选择器（#intro） */
</style>
</head>
<body>
<div id="title">
<span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 -->
</div>
</body>
</html>
【最终效果（权值大的优先）】Hello World
（4）对于继承祖先的样式，最近祖先优先
当继承祖先的样式发生冲突时，根据继承的关系进行比较，最近祖先优先
<!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; }
#intro { color: green; }
</style>
</head>
<body>
<div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 -->
<div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 -->
<span>Hello World</span>
</div>
</div>
</body>
</html>
【最终效果（最近祖先优先）】Hello World
（5）!important 声明无视上面的规则，其指定的样式永远不被覆盖【重要】
其实这样的说法或许还有些许不准确，因为（有且仅有） !important 声明可以覆盖 !important 声明
<!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red!important; } /* 加上 !important 声明的内部样式表 */
</style>
</head>
<body>
<div style="color: green;" id="title"> <!-- 内联样式 -->
Hello World
</div>
</body>
</html>
【最终效果（!important 声明优先）】Hello World
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】