Html 使用两个CSS注册和登录表单而不相互覆盖

我有两种不同的形式，我希望在一页上使用。 一个是我的登录表单，用于登录用户，另一个是主内容部分的注册表单。它们都有单独的css样式表。 在css样式表中，如果它们不互相覆盖，我怎么能设计它们呢？有什么简单的东西我没有想到吗

*//CSS Form1*

#form 1 
input {etc}
text area{etc}

*//CSS Form2*
#form 2
input {etc}
text area{etc}

---

其实很简单。在HTML中，给登录表单一个

loginForm

id或者类似的东西；并且，给登记表一个

registrationForm

id:

<form id = "loginForm"></form>
<form id = "registrationForm"></form>

因为登录和注册表单是接口的特定实例，所以我将使用ID而不是类。除了在CSS中，ID与类相比具有更高的特异性。

HTML

<form id="reg">
    <input type="button" class="button" text="submit" value="submit" />
</form>
<form id="login">
    <input type="button" class="button" text="submit" value="submit" />
</form>

样本输出：

---

为什么不给他们单独上课呢？您总是可以使用多个样式表，您只需要确保您没有对多个样式表使用相同的类/id，或者通过尝试设置一些通用标记（如“div”或“ul”等）的样式来产生冲突。

<form id="reg">
    <input type="button" class="button" text="submit" value="submit" />
</form>
<form id="login">
    <input type="button" class="button" text="submit" value="submit" />
</form>

#reg .button {
    background-color:red;
    width:250px;
    height:100px;
}
#login .button {
    background-color:green;
    width:200px;
    height:80px;
}