前些天在修改一个前端项目，由于笔者能力有限，在阅读代码时遇见了诸多不解。笔者的学习路线一向以项目作为出发点，虽然这样做可以快速上手一门技术点，但带来的却是理论知识的不足。导致的情况就是 有些功能自己可以写出来，但不知道该怎么解释给同事，并且在阅读同事的代码时，非常吃力。于是笔者决定去恶补一些前端知识，并且在简书上做出一些小总结。
说起CSS，真的是让人又爱又恨......记得刚开始学习CSS时，就感觉到了他的强大，同时，它也带给了我巨大的麻烦，尤其是与JavaScript“联动”的时候，就感觉到了CSS给予的压力。
回到正题，记得当时我遇见的第一个坑，那就是CSS选择器的优先级问题......
说起CSS选择器，不得不提的就是CSS的三大特性：继承性、层叠性、优先级。
继承性
是指当子标签没有设置样式时，会继承父标签的样式。比如说，当一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。
继承也并不是一味的全部继承，子标签是不会继承父标签的宽度、高度、边距属性的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
div{
color: red;
}
</style>
</head>
<body>
<div>
<p>hello world!!!</p>
</div>
</body>
</html>
上述代码中，p标签是div标签的子标签，div标签设置了颜色为red的样式，所以p标签继承了div标签的样式，文本颜色会变为红色。
层叠性
当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。其实意思很简单，就是相同的属性在不考虑优先级的状况下不能共存，一般是遵循就近原则，最终生效的样式是离标签最近的样式。可参考如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
div{
color: red;
}
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p>hello world!!!</p>
</div>
</body>
</html>
此时，采取就近原则，文本的颜色变成了蓝色。
需要注意的是，层叠性只覆盖同样的不可重复的样式属性，不会因为这里写color、那里写background而发生覆盖，必须同样是属性或者说重复的属性才会覆盖，不重复的属性则会发生合并。
优先级
这是笔者学习时最容易踩坑的地方。笔者将从优先级的由小到大开始说起。
标签选择器：
基本上可以理解为给标签添加的CSS样式，可参考上文代码。
类选择器：
通过标签的class属性来修改CSS样式，可参考下图代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
.hw{
color: yellow;
}
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p class="hw">hello world!!!</p>
</div>
</body>
</html>
由上述代码可见，类选择器的优先级要比标签选择器高。
id选择器：
优先级大于类选择器与标签选择器，不过需要注意的是，id选择器不可重复使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
.hw{
color: yellow;
}
#od{
color: green;
}
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p id="od" class="hw">hello world!!!</p>
</div>
</body>
</html>
行内样式：
这个选择器则比较直接，直接写在标签的style属性中，优先级仅次于!important。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
.hw{
color: yellow;
}
#od{
color: green;
}
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p style="color: black" id="od" class="hw">hello world!!!</p>
</div>
</body>
</html>
!important:
这才是拒绝一切花里胡哨，在样式属性值的后面添加!important可使其优先级变成最大。不过呢，需要注意，!important难以维护，扰乱了原本的CSS顺序，使用时，需深思熟虑，不到万不得已，不要轻易使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css特性</title>
<style type="text/css">
p{
color: blue !important;
}
.hw{
color: yellow;
}
#od{
color: green;
}
</style>
</head>
<body>
<div>
<p style="color: black" id="od" class="hw">hello world!!!</p>
</div>
</body>
</html>
细心的小伙伴可能发现，标签选择器本来是div，但在上述代码中却成了p标签。在这，笔者想要说明的是，!important是不可以被继承使用的，只能被直接选中的目标使用。所以，给div增加!important在上述代码中是实现不了的，不过呢，将类标签和id标签或style写在div标签里，那就可以在div标签中实现!important的作用了。
最后总结一下，选择器的优先级大致分为 !important>行内样式>id选择器>类选择器>标签选择器>继承，其中，笔者要再三强调，!important一定要慎重使用！
