css优先级有6级。
0级：通配选择器、选择符和逻辑组合伪类。
通配选择器是 * 。
选择符有+、-、~、空格和 || 。
逻辑组合伪类有 :not()、:is()和 :where。这些伪类影响优先级的是括号里的选择器。
eg: :not([rel=nofollow])
1级：标签选择器。
2级：类选择器、属性选择器和伪类。
3级：ID选择器
4级：内联选择器
5级：!important
（1）数值计算法
0级--优先级为0；
1级--优先级为1；
2级--优先级为10；
3级--优先级为100。
（2）后来居上
优先级数值相同情况下，越后面优先级越高。
1.增加css选择器优先级的方法
（1）重复选择选择器自身
.foo.foo {}
（2）借助必然会存在的属性选择器
.foo[class] {}
#foo[id] {}
除了这两种方法，常用的是增加父级嵌套和增加标签选择器，但这种方法增加了耦合，降低了可维护性，不建议使用。
2.数值计算法的点评
不同级别的选择器优先级差距并不是10比1，差距比这大得多，而是因为实际开发中不会连续写10个而已。
在ie浏览器下，256个类选择器的优先级大于id选择器的优先级，原因是类名是以8字节存储的，8字节所能容纳的最大值就是255.
除了ie外，其他都使用16进制，不会出现这种情况。
了解css选择器的优先级后，日常工作就知道是怎么回事了。
是因为默认的优先级高于设置的优先级，所以显示不正确。
这属于"多重样式（Multiple Styles）"
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style,例如：
<head><style type="text/css">
/* 内部样式 */
h3{color:green}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue} -->
</head>
<body>
<h3>测试！</h3>
</body>
在选择器的情况下：
如图:
解释：
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
利用选择器的权值进行计算比较，示例如下：
<html><head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00 /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
结果：<em> 标签内的数据显示为蓝色。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
<html><head>
<style type="text/css">
#redP p{
/*两个color属性在同一组*/
color:#00f !important /* 优先级最大 */
color:#f00
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>
通常我们可以将CSS的优先级由高到低分为六组：1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0} 会覆盖 .classname{margin:3px}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px} 会覆盖 div{margin:6px}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px} 覆盖 *{margin:10px} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html 前端开发的技术 你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
