纯HTML与CSS彩色色块无法显示问题求助

你的页面看不到任何内容，是因为那三个带颜色类的<div>元素没有设置宽度和高度。空的块级元素默认宽高都是0，哪怕设置了背景色也没法显示出来，浏览器没报错是因为代码本身没有语法问题。

修复方案1：给每个颜色类添加尺寸 #

修改flag.css，给每个类加上宽高属性：

.red {
  background: red !important;
  width: 100px;
  height: 100px;
}

.blue {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.green {
  background-color: green;
  width: 100px;
  height: 100px;
}

修复方案2：用公共类简化代码 #

如果多个元素需要相同尺寸，可以批量设置基础样式，减少重复代码：

/* 统一设置所有颜色块的基础样式 */
.red, .blue, .green {
  width: 100px;
  height: 100px;
  margin: 8px 0; /* 可选，增加垂直间距避免块重叠 */
}

.red {
  background: red !important;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

额外检查：确保CSS正确引入 #

确认flag.html里已经正确引入了flag.css，完整的HTML结构应包含头部的链接标签：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flag Page</title>
  <!-- 路径要和实际文件位置匹配 -->
  <link rel="stylesheet" href="flag.css">
</head>
<body>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
</body>
</html>

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