html - 如何在一种形式的文本输入上没有样式，但为另一种形式的输入设置样式？

Question

我需要为每个表单的文本输入设置不同的样式，但它仍然对两个表单应用文本 css 规则。当前代码使它看起来像这样；

.mail-form {
text-align: center;
width: 100%;
}

.apply-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
margin-left: 4vh;
}

<form class= "mail-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form> 

<form class="apply-form">
<p>First Name:</p>
<input type="text" name="firstname">
</form>

我需要邮件表单看起来像这样；

.mail-form {
text-align: center;
width: 100%;
}

<form class= "mail-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form> 

注意文本框保持那个大小，我需要申请表看起来像这样；

.apply-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
margin-left: 4vh;
}

<form class="apply-form">
<p>First Name:</p>
<input type="text" name="firstname">

我如何在不影响邮件表单规则的申请表单规则的情况下输入这些文本。

提前致谢。

Answer 1

您应该只需要在您的输入前加上适当的类前缀

.mail-form {
  text-align: center;
  width: 100%;
}

.apply-form {
  text-align: left;
  margin-left: 2vh;
}

.apply-form input[type="text"] {
  padding: 1vh;
  margin-left: 4vh;
  width: 80%;
}

<form class="mail-form">
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

<form class="apply-form">
  <p>First Name:</p>
  <input type="text" name="firstname">
</form>