Question

例如我在多个地方都有表单元素，比如

form {
display: table;
margin: 20px auto;
text-align: center;
}

现在这个样式属性覆盖了另一个表单元素的样式属性，现在表单没有id属性，我给了表单一个名字＆amp;尝试使用name属性，但它无法正常工作。

form[name="myform"] {
display: table;
margin: 20px auto;
text-align: center;
}

请建议解决方案

Answer 1

对于每个页面，使用另一个CSS样式和新的define元素。
或使用类，例如class="form_1"
或使用 ID ，例如id="form_1"
或者不重写使用font-size: 18px !important

Answer 2

将类分配给表单标记，例如：

<form class="x"> ... </form>

并为这些类设置CSS：

.x {
  color: red;
  ...
}

关于评论中的问题：这是一个示例，演示这是有效的（注意覆盖表单颜色的类颜色）：

form { 
    display: block;
    margin-top: 0em;
  color: blue;
}
.x { color: red;
  font-size: 24px;
}

<form action="demo_form.asp" class="x">
First name: <input type="text" name="FirstName" value="Jane"><br>
Last name: <input type="text" name="LastName" value="Doe"><br>
<input type="submit" value="Submit">
</form>

Answer 3

您有多种选择，但一种简单的方法是使用不同的ID或不同的类，如下所示：

<form id="first"> </form>
<form id="second"> </form>

如何将两种不同的样式属性应用于不同位置的同一元素？

3 个答案: