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

Question

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

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

<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/

非常感谢任何帮助。

Answer 1

/* 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>

Answer 2

您可以简单地使用 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

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

How do I format two different forms in the same stylesheet?

html

css

forms