这是我参与更文挑战的第 3 天，活动详情查看： 更文挑战
如果我在 <div class="iphone">iphone 12</div> 标签上同时定义了 div {color: lightgreen;} .iphone {color :red;} 两个同时设置文本颜色的样式，那么 iphone 12 会显示什么颜色？
如果我在内部样式表和外部样式表同时定义了 div {color: purple;} div {color: black;} 两种不同的文本颜色样式，此时 iphone 12 会显示什么颜色？
这就涉及到了 CSS 选择器的优先级问题：
优先级权重值：
我们把 CSS 优先级权重值分为 5 个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
!important，加在样式属性值后，权重值为 10000 。- 内联样式，如：
style=""，权重值为 1000 。 - ID选择器，如：
#cc1，权重值为 100 。 - 类、伪类，如：
.content、:hover，权重值为 10 。 - 标签选择器，如：
div、p，权重值为 1 。
对于 4 种 CSS 引用方式的优先级来说，符合：
- 就近原则。
- 内部样式、
<link>链入外部样式表、@import导入外部样式表三种方式同时出现在 HTML 页面的<head></head>标签内时，谁离要修改样式的元素近，谁的优先级高。 - 行内样式 > 内部样式、
<link>链入外部样式表、@import导入外部样式表。
以上两种优先级会不会产生冲突？具体应该如何理解？通过以下实例来验证一下。
实例
qt_04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qt_04</title>
<link rel="stylesheet" href="qt_04_style.css">
<style>
div {
color: red!important;
}
.class_box1 {
color: yellow;
}
#id_box1 {
color: green;
}
</style>
</head>
<body>
<div class="class_box1" id="id_box1" style="color: blue">
选择器优先级实例1-div
</div>
</body>
</html>
复制代码qt_04_style.css
div {
color: black;
}
.class_box1 {
color: brown;
}
#id_box1 {
color: pink;
}
复制代码实例说明：
div {color: red!important;} 权重为 10000 。
style="color: blue" 权重为 1000 。
#id_box1 {} 权重为 100 。
.class_box1 {} 权重为 10 。
div {} 权重为 1 。
此时文本颜色为 red 。
如果删除 !important ，此时文本颜色为 blue 。
如果删除 style="color: blue" ，此时文本颜色为 green 。
如果将 <link> 标签写在 <style></style> 标签之后，此时文本颜色为 pink ，调用的是 qt_04_style.css 外部样式表中的样式。
如果删除 id="id_box1" ，此时文本颜色为 yellow 。
如果删除 class="class_box1" ，此时文本颜色为 red 。
CSS 优先级法则
- 选择器都有一个权值，权值越大越优先。
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
- 创作者的规则高于浏览器：既网页编写者设置的CSS 样式的优先级高于浏览器所设置的样式。
- 继承的 CSS 样式优先级低于后来指定的 CSS 样式。
- 在同一组属性设置中标有
!important规则的优先级最大。
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
