Combine [attribute = value]與：nth-​​child（）

Question

我在使用LESS並希望匹配其類型爲文本的特殊輸入。

目前，我這樣做：

td { 
    input[type=text] { 
     width: 100px; 
    } 
} 

對於我喜歡的類型複選框的第二輸入，我需要另一個寬度。我嘗試這樣做：

td { 
    input[type=text] { 
     width: 100px; 

     &:nth-child(2) { 
      width: 40px; 
     } 
    } 
} 

但是，這是行不通的。任何想法如何結合[type=text]與:nth-child()？

Answer 1

你更不能轉換爲下面的CSS沒有任何錯誤：

td input[type=text] { 
    width: 100px; 
} 

td input[type=text]:nth-child(2) { 
    width: 40px; 
} 

但是，如果您有其他元素的文本輸入的兄弟姐妹，它們可以與:nth-child()聲明干擾，爲:nth-child()不僅外觀在一個元素相對於同一父類中的所有其他同胞的位置上，而不僅僅是其他類型的元素（即input[type=text]）。例如，如果您有第二個孩子的label，那麼您的輸入將不再是第二個孩子，因爲該位置已被標籤佔據。

如果您有td中唯一的輸入是所有的[type=text]你應該能夠使用:nth-of-type()，而不是逃脫：

// LESS 

td { 
    input[type=text] { 
     width: 100px; 

     &:nth-of-type(2) { 
      width: 40px; 
     } 
    } 
} 

/* CSS */ 

td input[type=text] { 
    width: 100px; 
} 

td input[type=text]:nth-of-type(2) { 
    width: 40px; 
} 

請記住，雖然，它只是着眼於元素名稱input而不是[type=text]屬性！

或者，如果你知道你只有兩個文本輸入框，你可以使用一般的兄弟選擇，而不是搶的是遵循先輸入之一：

// LESS 

td { 
    input[type=text] { 
     width: 100px; 

     & ~ input[type=text] { 
      width: 40px; 
     } 
    } 
} 

/* CSS */ 

td input[type=text] { 
    width: 100px; 
} 

td input[type=text] ~ input[type=text] { 
    width: 40px; 
}