我怎么能在一个表单的文本输入上没有样式，而在另一个表单上设置输入的样式？

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>

​