4

LESSを使用していて、タイプがテキストである特別な入力と一致させたい。

現在、私はこれを行っています：

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

タイプチェックボックスの2番目の入力には、別の幅が必要です。私はこれを試しました：

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()宣言に干渉している可能性があります (つまり、 ）。たとえば、2 番目の子として があった場合、その場所はラベルによって取得されているため、入力は 2 番目の子ではなくなります。: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]

または、テキスト入力が 2 つしかないことがわかっている場合は、代わりに一般的な兄弟セレクターを使用して、最初の入力に続くものを取得できます。

// 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 に答える