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

Question

I have this HTML code :我有这个 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>

In this HTML, i want hide all input type="file" inside div class="field"except the first one.在这个 HTML 中，我想在 div class="field" 中隐藏所有输入 type="file" 除了第一个。 I cannot change the HTML (adding classes).我无法更改 HTML（添加类）。 I tried to apply a pseudoclasses and structurate selector toghether, to accomplish the task :我尝试同时应用伪类和结构选择器来完成任务：

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

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

But it seems doesn't work.但它似乎不起作用。 Anyone could suggest me the right syntax for using pseudo classes and selector togheter in css, to solve this problem?任何人都可以建议我在 css 中使用伪类和选择器的正确语法来解决这个问题？

Answer 1

Pseudo-classes use only one colon, so it's :first-child , not ::first-child .伪类只使用一个冒号，所以它是:first-child ，而不是::first-child 。

But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.但是您的第一个input[type='file']不是第一个孩子，所以无论如何您都不能使用:first-child 。

You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:您必须切换规则并使用同级选择器来隐藏后续文件上传输入：

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

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

This technique is further described here , and can be used for most other simple selectors, not just classes and attributes.此技术在此处进一步描述，可用于大多数其他简单选择器，而不仅仅是类和属性。

Answer 2

You can use this code for all values and you will hide all input type="file" inside div class="field"except the first one.您可以将此代码用于所有值，并且您将隐藏 div class="field" 中的所有 input type="file" 除了第一个。 try this code.试试这个代码。

<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-11-19 10:53:01

解决方案2
0 2012-11-19 11:49:18

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-11-19 10:53:01

解决方案2 0 2012-11-19 11:49:18

解决方案1
2 已采纳 2012-11-19 10:53:01

解决方案2
0 2012-11-19 11:49:18