如何在同一个样式表中格式化两个不同的表单？答案

【问题标题】：How do I format two different forms in the same stylesheet?如何在同一个样式表中格式化两个不同的表单？
【发布时间】：2022-02-09 17:06:48
【问题描述】：

看起来很简单，但我正在失去理智。

我想独立格式化两种不同的表格。这是一个例子。

<h1>FORM 1</h1>
<form>
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>
<br>
<h1>FORM 2</h1>
<form id="form2">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>

/* Form 1 style */
input[type="text"],
input[type="password"],
input[type="email"],
select{
    display:block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Form 2 style? */

input[type="text"],
input[type="password"],
input[type="email"],
select{
    display:block;
    width: 50%;
    margin-top: 1px;
    margin-bottom: 1px;
}

https://jsfiddle.net/dtpoze0c/

非常感谢任何帮助。

【问题讨论】：

标签： html css forms

【解决方案1】：

您可以简单地使用 class 或 id CSS 选择器，所以像第二个一样添加一个 id 到第一个：<form id="form1">

然后用它来创建你的风格：

/* This will only affect the form with the form1 id */
#form1 input[type="text"],
#form1 input[type="password"],
#form1 input[type="email"],
#form1 select {
    display: block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

你可以在这里看到一些关于 id 的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

【讨论】：

【解决方案2】：

/* Form 1 style */
.form1 input[type="text"],
.form1 input[type="password"],
.form1 input[type="email"],
.form1 select{
    display:block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Form 2 style? */

.form2 input[type="text"],
.form2 input[type="password"],
.form2 input[type="email"],
.form2 select{
    display:block;
    width: 50%;
    margin-top: 1px;
    margin-bottom: 1px;
}

<h1>FORM 1</h1>
<form class="form1">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>
<br>
<h1>FORM 2</h1>
<form class="form2" id="form2">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>

【讨论】：