将[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

您的LESS应该转换为以下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;
}