优先级：
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8">
<title>优先级</title>
<style>
div{
color: #f00
;
}
</style>
</head>
<body>
<div>
<h2>故事是从一个叫张小凡的普通少年开始的</h2>
<p>故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的</p>
</body>
</html>
最初显示的效果是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8">
<title>优先级</title>
<style>
div{
color: #f00
;
}
.d{
color: #f00
;
}
</style>
</head>
<body>
<div class=
"d">
<h2>故事是从一个叫张小凡的普通少年开始的</h2>
<p>故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的故事是从一个叫张小凡的普通少年开始的</p>
</body>
</html>
我们在这里加了一个类选择器，给文本设置颜色，可以看的文本颜色是我们的类选择设置的颜色，这就可以看出，类选择器的优先级要比标签选择器高。
... ...
.d{
color: #f00
;
}
#dd{
color: #0f0
}
</style>
</head>
<body>
<div class=
"d" id=
"dd">
<h2>故事是从一个叫张小凡的普通少年开始的</h2>
... ...
这里我们可以看到 ID选择器大于类选择器
... ...
.d{
color: #f00
;
}
#dd{
color: #0f0
}
</style>
</head>
<body>
<div class=
"d" id=
"dd" style=
"color: skyblue;">
<h2>故事是从一个叫张小凡的普通少年开始的</h2>
... ...
这里我们加了一个行内样式，效果如下：
可见文本显示的颜色是我们设置的行内养的颜色，所以行内样式又大于ID选择器
接下来我们总结一下优先级：
行内样式>ID选择器>类选择器>标签选择器---->(着重记忆一下)
一般而言，选择器指向的越准确，优先级就会越高。通常我们会用1来表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，用1000来表示行内样式。
> 标签选择器 1
> 类选择器 10
> ID选择器 100
> 行内样式 1000
值越大表示其优先级越高， 不管是单个选择器还是多个选择器组合，它们之前的优先级都可以通过这个公式来进行计算，我们将其值称之为为权重值，权重值越大就表示其优先级越高
