css - 结构伪类和属性选择器不能一起工作

Question

我有这个 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 中，我想隐藏所有 input type="file"inside div class="field"除了第一个。我无法更改 HTML(添加类)。我试图同时应用伪类和结构化选择器来完成任务:

.field input[type='file']{
  display:none;
}

.field input[type='file']::first-child{
display:block;
}

但是好像不行。任何人都可以建议我在 css 中一起使用伪类和选择器的正确语法来解决这个问题？

Answer 1

伪类只使用一个冒号，所以它是:first-child , 不是 ::first-child .

但是你的第一个input[type='file']不是第一个 child ，所以你不能使用 :first-child无论如何。

您必须改变规则并使用兄弟选择器来隐藏后续的文件上传输入:

.field input[type='file'] {
    display:block;
}

.field input[type='file'] ~ input[type='file'] {
    display:none;
}

进一步描述了此技术 here , 并且可以用于大多数其他简单的选择器，而不仅仅是类和属性。