如何解决HTML关联CSS失效问题？作品集样式不生效排查

你的CSS规则全部被划掉不生效，核心原因是CSS代码存在多处语法错误，导致浏览器解析到错误位置时中断，后续所有规则都被忽略。以下是具体错误和修复方案：

一、CSS代码中的语法错误及修复 #

1. 变量值格式错误 #

错误代码：

--header-height: 3 rem;

修复后（去掉数值与单位间的空格）：

--header-height: 3rem;

2. 媒体查询语法错误 #

错误代码：

@media screen and {min-width: 968px {

修复后（补全括号，修正语法结构）：

@media screen and (min-width: 968px) {

3. 样式声明缺少分号 #

错误代码：

.container{
    max-width: 768px;
    margin-left: var(--mb-1-5)
    margin-right: var(--mb-1-5)
}

修复后（每个属性末尾添加分号）：

.container{
    max-width: 768px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

4. 宽度值缺少单位 #

错误代码：

.nav{
    max-width: 968;

修复后（添加px单位）：

.nav{
    max-width: 968px;

5. 伪类选择器语法错误 #

错误代码：

.nav__toggle:hover;
    color: var(--first-color);

修复后（用大括号包裹样式内容）：

.nav__toggle:hover {
    color: var(--first-color);
}

6. 变量引用缺少var关键字 #

错误代码：

background-color: (--body-color);

修复后（用var()包裹变量）：

background-color: var(--body-color);

7. 多余的闭合大括号 #

CSS代码末尾存在两个多余的}，直接删除即可。

二、HTML代码中的结构错误及修复 #

1. 导航菜单容器提前闭合 #

错误代码：

<div class="nav__menu" id="nav-menu"></div>
    <ul class="nav__list grid">...</ul>
    <i class="uil uil-times nav__close" id="nav-close"></i>

修复后（将</div>移到菜单内容之后）：

<div class="nav__menu" id="nav-menu">
    <ul class="nav__list grid">...</ul>
    <i class="uil uil-times nav__close" id="nav-close"></i>
</div>

2. 按钮容器语法错误 #

错误代码：

<div.nav="nav__btns">

修复后（修正class属性写法）：

<div class="nav__btns">

3. 导航切换按钮内容错误 #

错误代码：

<div class="nav__toggle" id="nav-toggle"></div>
<i class="uil uil-apps"></i>

修复后（将图标放入toggle容器内）：

<div class="nav__toggle" id="nav-toggle">
    <i class="uil uil-apps"></i>
</div>

修复步骤 #

1. 按照上述方案修正所有CSS语法错误
2. 修正HTML中的结构和语法错误
3. 保存文件后刷新页面，检查CSS规则是否正常生效

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