覆蓋全局類型選擇器類

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; 
    ... 
}