如何为不同表单的文本输入框设置差异化样式？解决样式冲突

你的核心问题在于全局的input[type=text]选择器会匹配页面上所有文本输入框，所以两个表单的输入框都会被同一份样式影响。下面给你两种针对性的解决方案：

一、给不同表单的输入框设置独立样式 #

用后代选择器精准定位每个表单下的输入框，这样就能分别定义样式，互不干扰。修改你的CSS如下：

/* 保留表单容器的原有样式 */
.mail-form { text-align: center; width: 100%; }
.apply-form { text-align: left; margin-left: 2vh; }

/* 仅作用于mail-form里的文本输入框 */
.mail-form input[type=text] {
  width: 80%;
  padding: 1vh;
  margin-left: 4vh;
}

/* 仅作用于apply-form里的文本输入框 */
.apply-form input[type=text] {
  /* 这里写你想要的独立样式，比如：
  width: 60%;
  padding: 0.5vh;
  margin-left: 0;
  */
}

这样修改后，两个表单的文本输入框就会各自应用对应的样式，不会互相覆盖了。

二、让其中一个表单的输入框不应用自定义样式 #

如果你的需求是一个表单用自定义样式，另一个用浏览器默认样式，有两种实现方式：

1. 删除全局规则，只给目标表单写样式
   直接删掉原来的全局input[type=text]规则，只给需要自定义样式的表单（比如.mail-form）写后代选择器样式，另一个表单的输入框就会自动使用浏览器默认样式。

2. 重置不需要自定义样式的输入框
   如果已经存在全局的input[type=text]规则，想让某个表单的输入框“取消”这些样式，可以用属性重置：

/* 全局基础样式（如果需要保留的话） */
input[type=text] {
  width: 80%;
  padding: 1vh;
  margin-left: 4vh;
}

/* 表单容器样式 */
.mail-form { text-align: center; width: 100%; }
.apply-form { text-align: left; margin-left: 2vh; }

/* 重置apply-form里的输入框为默认样式 */
.apply-form input[type=text] {
  /* 一键重置所有样式到默认 */
  all: unset;
  /* 或者按需逐个重置属性，更可控：
  width: auto;
  padding: initial;
  margin-left: 0;
  border: 1px solid #ccc; /* 可选：如果unset后边框消失，手动加回默认边框 */
  */
}

补充说明 #

你原来的代码里有两个重复的input[type=text]规则，CSS会自动合并这些规则的属性（如果有冲突，后面的规则会覆盖前面的），但用后代选择器精准定位后，就不需要这种全局规则了，代码会更清晰易维护。

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