CSS样式不生效求助：按钮未显示预期样式

核心问题分析 #

你的CSS未正常生效，主要是几个关键错误导致：

• 语法错误：多个CSS选择器块的闭合大括号后额外加了分号（比如.div_design {};），这会破坏CSS解析规则，导致后续样式被浏览器忽略。
• 按钮文本颜色设置错误：你给按钮设置的是color:blue，但需求是白色文本，与预期不符。
• 额外小问题：title_design里的border-bottom: 1% solid blue使用百分比作为边框宽度，属于不合法单位，需要换成px这类长度单位。

修正后的CSS代码 #

body {
  padding: 1.2em;
  font: 1.3em "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #F3F2EF;
}

a {
  color: #00B7FF;
}

.div_design {
  background-color: #ffffff;
  height:auto;
  margin: 8%;
  margin-right: 5%;
  border-radius: 1%;
}

.field_design {
  border:none;
}

.label_design {
  display:block;
  margin: 0.25em;
}

.title_design {
  font-size: 2.5rem;
  margin: 2%;
  border-bottom: 1px solid blue;
}
.text_input {
  font-size: 1.2em;
  line-height: 1.5;
  display: block;
  margin: 0.25em;
  border-radius: 3px;
}

.button_design {
  color: white;
  margin: 0.25em;
  background-color: rgba(51,121,245,0.88);
  /* 可选：添加内边距和圆角让按钮更美观 */
  padding: 0.3em 0.8em;
  border: none;
  border-radius: 3px;
}

额外说明 #

• 移除了所有选择器块末尾多余的分号，确保CSS解析正常。
• 把按钮的color改成white，满足白色文本的需求。
• 修正了标题边框宽度的单位为1px，保证边框正常显示。
• 给按钮补充了少量样式优化，你可以根据实际需求调整。

内容的提问来源于stack exchange，提问作者Xu Shuo ze