什么是CSS权重？
CSS（Cascading Style Sheets） 是描述 HTML 或 XML 等文件如何显示（如样式、字体、颜色等）的语言。当 HTML 文件被浏览器解析时，它会加载与 HTML 文件相关联的 CSS 文件，并将 CSS 文件中的内容应用于 HTML 文件。 但当一个选择器被多个规则集命中时，就会发生 CSS 冲突。这时候 CSS 权重就非常重要了。
CSS 权重定义了哪条规则会被应用。当多个规则对同一个 HTML 元素生效时，CSS 权重规定了哪个规则更加重要。
权重是由一个或多个选择器的特定性质的值来确定的。选择器的特定性（specificity）通常由选择器中类型、类、属性等的种类数目来确定。例如，id 选择器具有更高的特定性，因为它既是唯一的，也是直接应用于元素的。下面将更详细地讨论特定性。
如何增加CSS权重？
1. 选择器的顺序
在 CSS 文件中，选择器的顺序决定了权重的好坏。如果 CSS 规则相同但选择器排列顺序不同，则排在后面的规则将具有更高的权重，可通过这个特性来增加选择器的权重。
/* 选择器在下面，权重更高 */
div p a {
color: red;
}
/* 选择器在上面，权重较低 */
a {
color: blue;
}
2. 使用!important
使用 !important 标记可以给样式属性赋予最高优先级，这种方法被认为是最容易和最快的方式来增加 CSS 权重。
p {
color: blue !important;
}
3. 嵌套选择器
内部选择器会优先匹配优先级较低的元素，但保留了外部选择器的权重。使用嵌套选择器可以帮助您增加 CSS权重。
div p a {
color: tomato;
}
4. ID选择器
ID选择器的特定性值高于属性选择器和类选择器。在使用时请注意，不要滥用 ID，因为 ID 是不可重复的。
#menu {
background-color: blue;
}
5. 类选择器
类选择器的特定性值比HTML元素选择器高，但比ID选择器低。
.btn {
color: red;
}
6. 属性选择器
属性选择器的特定性值低于类选择器。
input[type='submit'] {
background-color: gray;
}
7. 子选择器、相邻选择器和通用选择器
子选择器（>）、相邻选择器（+），以及通用选择器（*）的特定性值都相对较低。
h1 > span {
color: green;
}
p + p {
color: yellow;
}
* {
color: black;
}
总结
在 CSS 中，选择器使用一套特定性规则来决定规则的优先级。选择器越具体，特定性就越高。使用 !important 可以克服特定性的弱点，但不推荐频繁使用。选择器顺序也很重要，起到了决定权重的作用。选择器使用的优先顺序是：ID，类，属性选择器，和HTML元素选择器。嵌套选择器也能有所帮助，但需要小心管理。在提高优先级时，应优先使用基于选择器的顺序，而不是 !important。