如何在不同的表單元素中提供css屬性？

Question

我在我的html頁面中有兩種形式。這兩種形式都包含input type="text"屬性。

如何爲輸入類型文本提供不同的CSS？

如果我將此：

input[type=text] { 
    //style 
} 

它會改變風格爲形式的兩個元素。

Answer 1

你可以給每個輸入它自己的Id或類選擇器，並分別設置Ids的樣式。

<input id='input1'> </input> 
<input id='input2'> </input> 

<style> 
#input1 { 
-- insert styles here for input 1 
} 

#input2 { 
-- insert styles here for input 2 
} 
</style> 

您還可以通過創建內聯樣式（快速和骯髒）來實現您想要的結果。

<input style="style1:theStyle;"> </input> 
<input style="style2:theStyle;"> </input> 

將來請分享一個代碼片段並進行更具描述性的描述。

Answer 2

爲此，我認爲你有這個輸入[type = text]標籤的任何容器。所以你可以使用這個容器作爲參考，並指向這兩個輸入標籤。

.form-container input[type=text]:nth-child(1){ 
 
border:2px dashed #000; 
 
} 
 
.form-container input[type=text]:nth-child(2){ 
 
border:2px dotted #000; 
 
}

<div class="form-container"> 
 
    <input type="text" > 
 
    <input type="text"> 
 
</div>

，或者你可以把一個 '身份證' 輸入標籤。

#form-one{border:1px dashed #000;} 
 
#form-two{border:1px dotted #000;}

<div class="form-container"> 
 
<input type="text" id="form-one" > 
 
<input type="text" id="form-two"> 
 
</div>