已链接外部样式表但未生效，开发者工具样式不显示

兄弟，我一眼就揪出问题啦！你在<link>标签里的rel属性值拼写错误了——写成了styleshet，而正确的属性值应该是stylesheet！这就是为啥浏览器没法正确识别并加载你的外部样式表，只会在Elements面板里闪一下紫色，但Styles面板里完全看不到对应的样式规则。

修正后的HTML代码： #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hi</title>
<!-- 这里修正了rel属性的拼写 -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
Hello!
</body>
</html>

你的CSS代码是完全没问题的：

body { font-size: 4em; }

另外，为了确保万无一失，你还可以检查这几点：

• 确认css/main.css的文件路径正确：比如你的HTML文件在项目根目录，那么css文件夹需要和它同级，且文件夹里确实存在main.css文件
• 打开开发者工具的Network面板，查看这个CSS文件的加载状态，如果显示404，说明路径有误，需要调整href的值
• 尝试清除浏览器缓存后重新加载页面，有时候缓存会导致样式无法及时更新

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