颜色优先级取决于选择器特异性、声明顺序和继承规则，内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素选择器，!important最高但慎用，子元素可覆盖继承值，开发者工具可调试生效情况，rgba支持透明度适合复杂视觉效果，hex更简洁适用于纯色场景。
CSS背景颜色和文字颜色的优先级，简单来说，就是如果元素自身设置了颜色，那就用自身的，否则就向上继承。但事情并没有这么简单，细节很多，一不小心就会踩坑。
CSS背景颜色和文字颜色优先级规则
为什么有时候我设置的颜色没生效？
这问题太常见了！首先，你要确认你的选择器是不是足够具体。CSS里，后面的规则会覆盖前面的规则，所以如果另一个选择器更具体，或者在CSS文件中出现得更晚，你的颜色可能就被覆盖了。
还有，别忘了继承！如果父元素设置了颜色，而子元素没有设置，子元素就会继承父元素的颜色。但如果子元素自己设置了颜色，那就以子元素为准。
立即学习“前端免费学习笔记（深入）”；
另外，!important是个大杀器，用了它，你的样式就会拥有最高的优先级，除非还有其他也用了!important并且更具体的选择器。但尽量少用，不然以后维护起来会疯掉。
内联样式、ID选择器、类选择器，到底哪个优先级更高？
这个是老生常谈了，但还是得说一下。优先级从高到低依次是：
- 内联样式（直接写在HTML元素上的
style属性里） - ID选择器（
#id） - 类选择器（
.class）、属性选择器（[attribute]）、伪类选择器（:hover） - 元素选择器（
p、div）和伪元素选择器（::before） - 通配符选择器（
*）
记住这个顺序，基本上就能解决大部分优先级问题了。不过，如果有多个相同优先级的规则，那么在CSS文件中出现得更晚的规则会覆盖前面的规则。
如何使用开发者工具调试CSS颜色问题？
开发者工具绝对是你的好朋友！打开浏览器的开发者工具（一般按F12），找到“Elements”或者“Inspect”选项，选中你想要检查的元素，就可以看到它应用的所有CSS规则。
你可以看到哪些规则生效了，哪些被覆盖了。还可以直接在开发者工具里修改CSS，实时预览效果，非常方便。
另外，开发者工具还会显示CSS规则的优先级，告诉你为什么某个样式没有生效。好好利用开发者工具，CSS调试会变得轻松很多。
rgba和hex颜色值有什么区别，哪个更好用？
rgba和hex都是表示颜色的方式，但它们有一些区别。hex是十六进制颜色值，例如#ffffff表示白色。rgba表示红色、绿色、蓝色和透明度，例如rgba(255, 255, 255, 0.5)表示半透明的白色。
rgba最大的优势是可以设置透明度，这在设计中非常有用。例如，你可以创建一个半透明的背景，让下面的内容隐约可见。
hex颜色值更简洁，更容易阅读和书写。但如果你需要设置透明度，那就只能用rgba了。
至于哪个更好用，取决于你的需求。如果不需要透明度，hex更方便。如果需要透明度，那就用rgba。
