我有这个 HTML 代码:
<div class="field">
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1"> <input type="file" value="" name="file2">
<input type="file" value="" name="file3"> <input type="file" value="" name="file4">
<input type="file" value="" name="file5"> <input type="file" value="" name="file6">
<input type="file" value="" name="file7"> <input type="file" value="" name="file8"> </div>
在此 HTML 中,我想隐藏 div class="field"内的所有输入 type="file",第一个除外。 我无法更改 HTML(添加类)。 我尝试同时应用伪类和结构选择器来完成任务:
.field input[type='file']{
display:none;
}
.field input[type='file']::first-child{
display:block;
}
但是好像不行。 任何人都可以建议我在 css 中使用伪类和选择器的正确语法来解决这个问题?
最佳答案
伪类仅使用一个冒号,因此它是 :first-child
,而不是 ::first-child
。
但是您的第一个 input[type='file']
不是第一个子级,因此无论如何您都不能将 :first-child
与它一起使用。
您必须切换规则并使用同级选择器来隐藏后续文件上传输入:
.field input[type='file'] {
display:block;
}
.field input[type='file'] ~ input[type='file'] {
display:none;
}
进一步描述了该技术 here ,并且可用于大多数其他简单选择器,而不仅仅是类和属性。
关于css - 结构伪类和属性选择器不能一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13452231/