通过css从多个输入隐藏最后3个输入类型文本

Question

如果我有一个多输入类型的文本，我想只显示3个顶部。 我用这个HTML和CSS。但隐藏失败。

http://jsfiddle.net/naresh_kumar/qecCC/

HTML

<div id="urlLinksInput"> 
    <p> 
     <input id="inputurl0" name="inputurl[]" type="text" class="txtinput"> 
    </p> 
    <p> 
     <input id="inputurl1" name="inputurl[]" type="text" class="txtinput"> 
    </p> 
    <p> 
     <input id="inputurl2" name="inputurl[]" type="text" class="txtinput"> 
    </p> 
    <p> 
     <input id="inputurl3" name="inputurl[]" type="text" class="txtinput"> 
    </p> 
    <p> 
     <input id="inputurl4" name="inputurl[]" type="text" class="txtinput"> 
    </p> 
</div> 

CSS

#urlLinksInput p input:nth-child(n+3) { display: none; } 

Answer 1

#urlLinksInput p:nth-child(n+3) input { 
    display: none; /* ^----this must be here,as <p> has only ONE child, 
              and that is <input>*/ 
} 

demo

Answer 2

使用HTML5 hidden attribute：

<input type="text" hidden> 

...这个后备的CSS不支持的浏览器：

[hidden] { 
    display: none; 
} 

Demo

编辑

更好用input[type=hidden]。它的工作原理与文本输入类似，您可以通过JavaScript与其交互，但它已隐藏：

<input type="hidden">