：首個類型選擇輸入類型=「文本」

我有以下情況：：首個類型選擇輸入類型=「文本」

<input type="hidden"> 
<input type="text"> 
<input type="hidden"> 
<input type="text"> 
<input type="text"> 
<input type="text"> 
<input type="hidden"> 
<input type="submit">

如何選擇只有前兩個input是[type="text"]？

正如你在這裏看到的，第一個input[type="text"]不是我需要的樣式。

DEMO

來源

2014-07-16 gespinha

添加一個類只有你想要的樣式？ – Coops

如果輸入數量發生變化，那麼使用純CSS就不可能。改爲使用JavaScript – singe3

儘管他們的名字可能會建議，:first-of-type和:nth-of-type()不考慮input元素，或任何其他元素上的任何其他屬性type屬性。它只考慮元素的類型，在所有元素的情況下爲input。通過擴展，:first-child和:nth-child()考慮全部計數時，同一父母的子女。因此，無論哪一類僞類都可以用來解決你的問題。

由於使用傳統CSS（或任何CSS）無法應用的特殊系統默認樣式的表單元素的性質，因此您使用input元素的事實會更加困難。您的問題是否可以解決取決於您希望應用於前兩個元素的樣式。

如果你申請的風格，將不會對所有的默認樣式（如display: none）影響，或對默認樣式你不在乎，然後使用general sibling combinator ~像我描述here和here將工作（注意使用兩個~組合子，因爲你正在尋找風格的前兩個元素，而不只是第一個）：

input[type="text"] { 
    /* 
    * Apply styles to all input[type="text"]. 
    */ 
} 

input[type="text"] ~ input[type="text"] ~ input[type="text"] { 
    /* 
    * Undo or override styles applied in the first rule for any input[type="text"] 
    * that follows at least two other input[type="text"]. 
    */ 
}

否則，如果您需要保留對後續元素的默認樣式，然後此技巧將無法正常工作，因爲在修改默認樣式後無法恢復。在這種情況下似乎沒有解決辦法。

來源

2014-07-16 10:14:45 BoltClock

：首個類型選擇輸入類型=「文本」

回答

相關問題