如何设置特定输入类型元素的样式而不影响其他元素

Question

我在使用选择器选择html中的特定输入文件元素时遇到问题。

如何设置特定输入类型元素的样式而不影响其他元素

Answer 1

您可以在下面设置特定类型的输入元素的样式 1）将一个类或id应用于input元素并为该类或id编写样式

<强> HTML

<input class="custom-file" type="file"/>

CSS：

.custom-file {
  border: 1px solid red;
}

2）或者您可以将输入类型本身定位在genral中，如下面的代码段所示。

<强> HTML

<input type="file"/>

CSS：

input[type="file"] {
  border: 1px solid red;
}

这将仅对输入类型文件应用css，而不对其他输入类型（如文本等）应用。这将为带有类型文件的页面中的所有输入标记添加边框红色。

3）或者如果存在多个输入文件，请尝试使用css中的nth-child选择器进行目标

**HTML**

 <input class="custom-file" type="file"/>
 <input class="custom-file" type="file"/>
 <input class="custom-file" type="file"/>

**CSS:** 
input[type="file"]:nth-child(2) {
    border: 1px solid red;
}

这将仅将边框添加到输入类型文件的第二个实例。