2

我有这个 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 中使用伪类和选择器的正确语法来解决这个问题？

4

2 回答 2

2

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

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

您必须切换规则并使用兄弟选择器来隐藏后续文件上传输入：

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

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

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

于 2012-11-19T10:53:01.570 回答
0

您可以将此代码用于所有值，并且您将在 div class="field" 中隐藏所有输入 type="file"，但第一个除外。试试这个代码。

<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>
于 2012-11-19T11:49:18.143 回答