CSS链接正确但实时预览不生效，已清缓存仍无解求助

你的代码存在几个关键问题，直接导致CSS样式无法生效：

• HTML结构无效：所有页面内容必须放在 <html> 标签内部，且需包裹在 <body> 标签中。你把带 box 类的<div>放在了</html>之后，浏览器无法正确解析这部分内容，自然不会应用样式。
• CSS选择器错误：要匹配class="box"的元素，必须使用类选择器.box，而非直接写box（这是标签选择器，只会匹配<box>标签，不是你定义的类）。
• CSS代码位置错误：你写的CSS代码直接放在HTML外部，若用外部样式表，需把这些代码存入style.css文件；若用内嵌样式，要把CSS放进<head>里的<style>标签中。

修复后的代码示例 #

方案1：使用外部样式表

HTML文件（index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>EMRID LIMITED</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
    <div class="box">
        <p>Home</p>
        <p>About</p>
        <p>Services</p>
        <p>Contact us 24/7</p>
    </div>
</body>
</html>

CSS文件（style.css）：

.box{
    background-color: darkolivegreen;
    max-height: 400px;
    max-width: 7000px;
}

方案2：使用内嵌样式

若不想用外部文件，可直接把CSS写在HTML内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>EMRID LIMITED</title>
    <style>
        .box{
            background-color: darkolivegreen;
            max-height: 400px;
            max-width: 7000px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>Home</p>
        <p>About</p>
        <p>Services</p>
        <p>Contact us 24/7</p>
    </div>
</body>
</html>

额外提醒：检查外部样式表路径，href="/style.css"是根路径，意味着style.css需和网站根目录同级。若HTML文件在子文件夹，需调整为相对路径，比如./style.css（同一文件夹）或../style.css（上级文件夹）。

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