为何同页面中相同写法的CSS ID选择器，一个生效另一个失效？

这事儿我之前调试样式时也碰到过类似的坑，结合你描述的情况（Chrome devtools显示用的是默认样式），大概率是下面几个原因之一，咱们一步步排查：

• 浏览器缓存搞的鬼
  浏览器为了加载更快，会缓存静态资源比如CSS文件。你改了ID和对应的CSS选择器，但浏览器可能还在复用旧的缓存文件，根本没读到新样式。解决办法很简单：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者打开Chrome开发者工具的「Network」面板，勾选「Disable cache」选项后再刷新页面，就能加载最新的CSS了。

• 拼写/大小写不一致
  仔细核对CSS里的#centipede和HTML里的id="centipede"是不是完全一致——CSS选择器是区分大小写的！比如你要是CSS里写的#Centipede（首字母大写），但HTML里是id="centipede"，那肯定匹配不上。别小看这种低级错误，调试时经常踩坑。

• 被更高优先级的样式覆盖
  虽然ID选择器的优先级已经很高，但架不住有更“霸道”的样式。比如：

  • 元素本身加了内联样式（<div style="color: black" id="centipede">），内联样式优先级比ID选择器高；
  • 其他CSS里有带!important的样式（比如div { color: gray !important; }），会直接覆盖你的ID样式；
  • 有没有更具体的选择器？比如.container #centipede这种组合选择器，优先级和纯ID选择器一样，但如果它在你的样式后面定义，就会覆盖前面的。
    你可以在Chrome devtools的「Elements」面板里找到这个div，看「Styles」面板里你的#centipede样式是不是被划掉了——如果是，上面会显示哪个样式在生效，就能找到冲突源了。

• CSS文件没真正更新
  确认你修改的CSS文件是不是当前页面正在加载的那个！有时候本地改了文件，但服务器上的CSS没同步更新，或者页面引用的是其他路径的CSS文件，导致新样式根本没被加载。可以在「Network」面板里找到加载的CSS文件，点击进去看内容，确认有没有#centipede { color: white; }这段代码。

• 页面里有重复的ID
  HTML规范要求ID必须是唯一的，但如果页面里有多个元素用了centipede这个ID，浏览器只会给第一个匹配的元素应用样式，后面的就会忽略。检查一下页面源码，看看有没有其他元素也用了id="centipede"。

内容的提问来源于stack exchange，提问作者driedupsharpie