4

我正在使用 LESS 并且想要匹配类型为文本的特殊输入。

目前，我正在这样做：

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

对于类型复选框的第二个输入，我需要另一个宽度。我试过这个：

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

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

但这行不通。任何想法如何[type=text]结合:nth-child()？

4

1 回答 1

6

您的 LESS 应转换为以下 CSS，没有任何错误：

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

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

但是，如果您有其他元素作为文本输入的兄弟元素，则这些元素可能会干扰:nth-child()声明，因为:nth-child()仅查看元素相对于同一父元素中所有其他兄弟元素的位置，而不仅仅是同类其他元素（即input[type=text]）。例如，如果您将 alabel作为第二个孩子，那么您的输入将不再是第二个孩子，因为该位置已被标签占用。

如果您拥有的唯一输入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;
}
于 2012-07-19T07:15:55.067 回答