求助：CSS样式无法应用到Header与Navbar的问题排查

问题描述 #

首次使用HTML和CSS搭建电商网站，开发初期遇到Header和Navbar的CSS修改在Chrome、Edge的localhost环境中无法显示效果，其余代码正常运行。已尝试更换选择器、clearfix方法、切换浏览器及无痕模式，问题仍未解决，使用VS Code编写，XAMPP本地部署。

原代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

</html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" contant="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AB's Ecommerce Website</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stytlesheet" href="style.css">
</head>

<body>

    <section id="header">
        <a href="#"><img src="logo.gif" class="logo" alt=""></a>
        <div class="header">
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="cart.html"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </section>

    <script src="script.js"></script>
</body>

</html>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght!100;200;300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;

}

h1 {
    font-size: 50px;
    line-height: 64px;
    color: #222;
}

h2 {
    font-size: 46px;
    line-height: 54px;
    color: #222;
}

h4 {
    font-size: 20px;
    color: #222;
}

h6 {
    font-weight: 700;
    font-size: 12px;
}

P {
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
}

.section-p1 {
    padding: 40px 80px;
}

.section-m1 {
    padding: 40px 0;
}

body {
    width: 100%;
}

/* Header */ 
#header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background-color: aqua;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);

}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

问题根源与修复方案 #

以下是导致CSS不生效的核心错误及修复方法：

• HTML结构错误：原代码中<html>的闭合标签</html>错误地写在<head>之前，导致浏览器无法正确解析文档结构，<head>内的CSS链接被视为无效内容。
  修复：将</html>移至文档末尾，放在</body>之后。

• CSS链接拼写错误：<link rel="stytlesheet" href="style.css">中的stytlesheet拼写错误，正确应为stylesheet，这直接导致浏览器无法加载CSS文件。
  修复：修正拼写为<link rel="stylesheet" href="style.css">。

• meta标签属性拼写错误：<meta http-equiv="X-UA-Compatible" contant="IE=edge">中的contant应为content，虽不直接影响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">
    <title>AB's Ecommerce Website</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section id="header">
        <a href="#"><img src="logo.gif" class="logo" alt=""></a>
        <div class="header">
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="cart.html"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

额外验证步骤 #

如果修复后仍有问题，可按以下步骤排查：

• 打开浏览器开发者工具（F12），切换到Network面板，刷新页面，确认style.css是否成功加载，若显示404则检查文件路径是否正确。
• 在Elements面板中选中#header或#navbar元素，查看右侧Styles面板，确认目标CSS规则是否被应用，是否存在样式覆盖情况。
• 确保XAMPP的网站根目录设置正确，HTML和CSS文件均放置在指定的根目录下。

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