覆盖全局类型选择器类

Question

我的应用程序有不同的表单页面。这些表单上的大多数文本框元素共享相同的全局css规则，例如width属性（150px），font-family，font-size等。因此，我为大多数文本框创建了一个全局css类型选择器类。但是，这些表单上的某些文本框需要width属性的另一个值（更小或更宽）。如何为特定文本框覆盖此类全局类型？

以下是我的大多数表单文本框的全局类型选择器类：

input[type=text]{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

提前谢谢。

Answer 1

为这些特定文本框创建一个类，并将样式应用于该类：

<input type="text" class="short" />

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

input[type=text].short
{
   width: 90px;
   ...
}

然后，此文本框将使用以下样式：

width: 90px;
font-family: verdana,
font-size: 12px;

---

或者，如果整个表单需要这些不同的样式，请为父元素设置选择器：

<div class="shortform">
   <input type="text" />
</div>

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

.shortform input[type=text]
{
   width: 90px;
   ...
}