如何在不同的表单元素中提供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>