从多个输入中通过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">