嘿，我来帮你一步步找出问题所在！你已经做了链接样式表、用两种方式测试的基础操作，那咱们从几个常见的坑入手：

1. 先检查CSS文件的链接是否完全正确 #

确认HTML里的<link>标签路径和文件名没出错：

• 如果CSS文件和HTML在同一文件夹，标签应该是：<link rel="stylesheet" href="styles.css">（替换成你的CSS文件名）
• 如果CSS在子文件夹（比如css/），路径要写成href="css/styles.css"
• 注意大小写！在Linux或macOS系统里，Styles.css和styles.css是两个不同的文件，Windows虽然不区分，但最好统一大小写避免跨系统麻烦。

2. 修复CSS代码的语法错误 #

你贴出来的CSS代码明显截断了，媒体查询部分没写完也没闭合：

body { font-size: 4px; } 
h1 { text-align: center; } 
.position { float: left; line-height: 0.8em; } 
.company-dates { float: right; line-height: 0.8em; text-align: right; } 
/* Custom, iPhone Retina */ 
@media (min-width: 320px) { 
  body { margin-top...

这种未闭合的语法错误会导致浏览器无法正确解析后续的CSS（甚至可能影响前面的规则）。请补全属性值和闭合的大括号，比如：

body { font-size: 4px; } 
h1 { text-align: center; } 
.position { float: left; line-height: 0.8em; } 
.company-dates { float: right; line-height: 0.8em; text-align: right; } 
/* Custom, iPhone Retina */ 
@media (min-width: 320px) { 
  body { margin-top: 1rem; } /* 补全属性值 */
} /* 闭合媒体查询的大括号 */

你可以用浏览器开发者工具的控制台（按F12切换到「控制台」标签）看看有没有CSS语法报错，这是快速定位语法问题的好方法。

3. 清空浏览器缓存 #

有时候浏览器会缓存旧的CSS文件，导致你修改的内容没显示出来。试试：

• 强制刷新页面：Windows按Ctrl+F5，Mac按Cmd+Shift+R
• 如果用Brackets的Live Preview，重启一下预览功能，确保它加载了最新的CSS文件。

4. 检查样式优先级和覆盖问题 #

打开浏览器开发者工具（按F12），选中你要修改的元素（比如<h1>），在「样式」面板里看看你的CSS规则是不是被划掉了：

• 如果被划掉，说明有更高优先级的样式（比如内联style属性、#id选择器）覆盖了你的规则
• 这种情况可以试试给选择器加更高的优先级（比如body h1代替h1），或者用!important临时测试（不推荐长期使用，尽量用优先级合理的选择器）

5. 确认CSS文件编码 #

如果CSS文件有乱码，浏览器可能无法正确解析。确保你的CSS文件是UTF-8编码，Brackets里可以在右下角查看和修改编码格式。

按照上面的步骤排查，应该能解决大部分样式不生效的问题～

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