咱们一步步来排查这个问题，应该很快就能找到原因：

1. 先说说选择器的小细节 #

你提到内联CSS能生效，但看你贴的内联代码是profile_pic_box { ... }——这个是元素选择器，可你的HTML里是个带id="profile_pic_box"的div啊，正常来说这个内联样式应该不会生效才对？除非你实际是把样式直接写在元素的style属性里（比如<div id="profile_pic_box" style="float:left;...">），这种内联样式优先级本来就比外部表高，但你现在说外部不生效，那咱们接着看其他可能。

2. 最常见的原因：样式表路径不对 #

你的链接标签是<link rel="stylesheet" href="style/style.css">，这是相对路径，意味着你的HTML文件所在的文件夹里，必须有一个叫style的子文件夹，里面放着style.css。举个例子，你的项目结构得是这样：

你的项目文件夹/
├─ 你的HTML文件（比如index.html）
└─ style/
   └─ style.css

如果路径错了，浏览器根本加载不到样式表，自然不会生效。你可以按F12打开浏览器开发者工具，切换到「网络」标签，刷新页面，看看style.css的请求状态：要是显示404，那就是路径问题，调整一下就行——比如如果HTML和style.css在同一个文件夹，就改成href="style.css"。

3. 样式被其他规则覆盖了 #

就算路径对了，外部样式也可能被优先级更高的样式盖过去。还是用开发者工具，选中那个#profile_pic_box的div，看「样式」面板：

• 找找你写的#profile_pic_box样式是不是在列表里，如果是灰色的，说明被其他规则覆盖了。
• 你可以试试提高选择器优先级，比如写成div#profile_pic_box，或者临时在属性后面加!important（比如float:left !important;）来测试是不是这个问题——不过!important尽量少用，只是用来排查的话没问题。

4. 浏览器缓存搞的鬼 #

有时候浏览器会缓存旧的样式表，你改了新样式但浏览器还在读缓存。这时候按Ctrl+Shift+R（Windows）或者Cmd+Shift+R（Mac）强制刷新页面，清掉缓存再看看。

5. 样式表有没有语法错误 #

如果style.css里有语法错误（比如漏了大括号、分号），可能会导致整个样式表失效。你可以把#profile_pic_box的样式移到样式表最顶部，看看会不会生效，或者用开发者工具的样式面板，里面会标红提示语法错误。

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