html - 不同表单中的相同元素有不同的 css 规则

Question

我目前有以下两种形式。

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

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

和

input[type=text] {
  width: 80%;
  padding: 1vh;
}

<form>
  <p>First Name:</p>
  <input type="text" name="firstname"><br>
</form>

如何为每个表单设置不同的规则？第一个需要内容居中对齐，第二个需要内容左对齐/左填充。

如果我更改 css 以更改对齐方式和大小。

提前致谢。

我已经更新了表单，如何才能让文本输入仅针对左侧表单设置样式？我不希望中间的任何文本输入规则。

.form-container {
background-color: #ff8e08;
width: 90%;
margin: auto;
}

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

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

<div class="applicationform">
<br>

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

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

Answer 1

为它们添加不同的类名。

CSS:

.center-form {
  /* center-form specific rules here */
}

.left-form {
 /* left-form specific rules here */
}

HTML:

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

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

如果您想分享他们都需要的一些 CSS 规则:

.form {
    /* shared CSS rules */
}

然后，在 HTML 中将这个 form 类名添加到它们中，如下所示:

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

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

请记住，覆盖类名，例如 center-form 和 left-form 应该跟在这个 form 实用程序类名之后。

对于您的特定情况，将您的 CSS 更改为:

body {
  margin: 0; /* Remove user agent default styles */
}

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

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

input[type=text] {
  width: 80%;
}

input[type="text"] {
  padding: 10px;
}