css3选择器优先级顺序（【H5/CSS】简单了解选择器的优先级）
样式的冲突
当我们通过不同的选择器 ，选中相同的元素 ，并且为相同的样式设置不同的值时 ，此时就发生了样式的冲突 。案例一：使用类选择器与元素选择器选中同一元素 ，设置不同颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .red { color: red; } div { color: yellowgreen; } </style> </head> <body> <div class="red">我是一个div</div> </body> </html>可以看到红色优先
选择器的权重
这是因为发生样式冲突时 ，应用哪个样式由选择器的权重（优先级）决定 ，谁前面位数越前 ，则谁越优先 ，可以看到类选择器优于元素选择器 。
选择器 权重 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级比较优先级时 ，需要将所有的选择器的优先级进行相加计算 ，最后优先级越高 ，则越优先显示（分组选择器是单独计算的）,说白就是看谁写得越长 ，就越优先 。
案例二：元素与id选择器进行复合 ，跟只使用id选择器比较
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> #box1 { background-color: orange; } div#box1 { background-color: yellow; } </style> </head> <body> <div id="box1">我是一个div</div> </body> </html>注意点：
选择器的累加不会超过其最大的数量级 ，比如类选择器再高（有11个）也不会超过id选择器
案例三：同一个选择器优先级比较
如果同一个选择器优先级计算后相同 ，此时则优先使用靠下的style样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .box2 { background-color: yellow; } .box1 { background-color: orange; } </style> </head> <body> <div class="box1 box2">我是一个div</div> </body> </html>使用!important
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级 ，甚至超过内联样式 ，但是在开发中这个玩意一定要慎用！因为一旦确定好优先级 ，就不方便更改
.box2 { background-color: yellow !important; } .box1 { background-color: orange; }参考
视频链接（P39）
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！