结构伪类和属性选择器不能一起工作 [英] Structural Pseudo Classes and attribute selectors doesn't work together

问题描述

我有此HTML代码：

 < div class =field> 
< input type =hiddenvalue =name =aid =a> < input type =hiddenvalue =xxxxname =bid =b> 
< input type =filevalue =name =file1> < input type =filevalue =name =file2> 
< input type =filevalue =name =file3> < input type =filevalue =name =file4> 
< input type =filevalue =name =file5> < input type =filevalue =name =file6> 
< input type =filevalue =name =file7> < input type =filevalue =name =file8> < / div> 
  

在这个HTML中，我想要在div class =field除了第一个。
我无法更改HTML（添加类）。
我试图应用一个伪类和结构化选择器来完成任务：

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

但它似乎不工作。
任何人都可以建议我在css中使用伪类和选择器togheter的正确语法来解决这个问题？

解决方案

伪类只使用一个冒号，所以它的：first-child ，而不是 :: first-child / p>

但是你的第一个输入[type ='file'] 不是第一个孩子，所以你不能使用：first-child

您必须切换规则，并使用同级选择器隐藏随后的文件上传输入：

  .field input [type ='file'] {
 display：block; 
} 
 
 .field输入[type ='file']〜input [type ='file'] {
 display：none; 
} 
  

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

I have this HTML code :

<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. I cannot change the HTML (adding classes). 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?

解决方案

Pseudo-classes use only one colon, so it's :first-child, not ::first-child.

But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.

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.

这篇关于结构伪类和属性选择器不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！