css - 如何提供不同形式的CSS属性？

我的html页面中有两种形式。两种形式都包含input type="text"属性。

如何为两种输入类型的文本提供不同的CSS？

如果我应用此：

input[type=text] {
   //style
}

它将改变表单元素的样式。

最佳答案

为此，我认为您在此input [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>

或者您可以在输入标签中添加一个“ id”。

#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>