如何使用輸入：nth-​​of-type（n）選擇輸入標籤？

Question

我只需要使用E:input:nth-of-type(n)將樣式應用於特定的輸入標籤。

請看看他的jsfiddle： http://jsfiddle.net/nLK2w/3/

你能指出我什麼是錯誤的嗎？將有意義使用E:nth-of-type(n)而不是？

<div class="snippet-navsetupfieldschosen" style=""> 
    <h1>xxx</h1><ul> 
     <li> 
      <input id="regionselection1" type="text" readonly="" name="regionselection1" data-href="regionselection1" class="focusable"> 
      </li> 
     <li> 
      <input id="regionselection2" type="text" readonly="" name="regionselection2" data-href="regionselection2" class="focusable"> 
      </li> 
      </ul> 
     </div> 



.snippet-navsetupfieldschosen ul li input:nth-of-type(1) { 
    border-top-left-radius: 30px; 
    border-top-right-radius: 30px; 
} 

Answer 1

這不是你想要的第一input，但第一個<li>。每個inputís每個<li>的第一個孩子，所以你的代碼會影響你在html中的每一個輸入。

例子： http://jsfiddle.net/skeurentjes/nLK2w/4/

Answer 2

要確保在你的情況，你的第一個輸入獲取與您想要的款式選擇的，你需要做的li元件具有:first-child以確保其瞭解， li的第一個孩子的輸入爲:nth-of-type(1)（現在是1）應該被選中。

這裏是WORKING DEMO

CSS的變化：

.snippet-navsetupfieldschosen ul li:first-child input:nth-of-type(1) { 
    border-top-left-radius: 30px; 
    border-top-right-radius: 30px; 
    background:red; 
} 

希望這有助於。