1. 引入选择器优先级概念
当使用不同的选择器，选中同一个元素时，并且设置相同的样式时。这时，样式之间产生了冲突，最终采用哪个选择器定义的样式，由选择器的优先级(权重)决定。优先级高的优先显示。
2.优先级的规则
- 内联样式 优先级1000
- id选择器 优先级100
- 类和伪类 优先级10
- 元素选择器 优先级1
- 通配选择器 优先级0
- 继承的样式 没有优先级
3.实际情况中要注意
- 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较。
举例1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 元素选择器优先级1 + 类选择器优先级10 = 优先级11 */
p.p1{
background-color: yellowgreen;
}
/* 元素选择器优先级1 + id选择器优先级100 = 优先级101 */
p#d1{
background-color: orangered;
}
</style>
</head>
<body>
<p class="p1" id="d1">我是一个段落</p>
</body>
</html>结果： 优先级值101大于11，所以背景颜色orangered起作用。
注意：选择器优先级计算不会超过它的最大的数量级。比如10个元素选择器的优先级最大也不会达到10。
- 如果选择器的优先级一样，则使用靠后的样式。
举例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.p2{
color: green;
}
.p1{
color: red;
}
</style>
</head>
<body>
<p class="p1 p2">我是一个段落</p>
</body>
</html>结果：可以理解为靠后的覆盖了前边的样式，所以为红色。
- 并集选择器的优先级是单独计算的，不会相加计算。如 div,p,#p1{}
- 可以在样式的最后，添加！important，此时该样式获得最高的优先级，将会优先于所有的样式显示。甚至超过了内联样式。开发中尽量避免使用！important。
举例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.p1{
color: green !important;
}
</style>
</head>
<body>
<p class="p1" style="color: orange">我是一个段落</p>
</body>
</html>结果：字体颜色为绿色，因为‘color: green’添加了！important。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。