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

Question

如果我有多个输入类型的文本并且我只想显示 3 top 。我使用了这个 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>*/
} 

演示

Answer 2

使用HTML5hidden属性：

<input type="text" hidden>

...对于不支持的浏览器使用这个后备 CSS：

[hidden] {
    display: none;
}

演示

编辑

更好用input[type=hidden]。它就像文本输入一样工作，您可以通过 JavaScript 与之交互，但它是隐藏的：

<input type="hidden">