2

最初のボタンと最後の要素にのみ丸い境界線を持つボタンのグループがあります。中間のボタンには何も含めないでください。これはうまくいきます。

ここで、同じことを行うテキスト フィールドを追加したいと思います。それが最初または最後である場合は丸い境界線を持つ必要があります。それ以外の場合はありません。

INPUTテキスト フィールドとBUTTONボタンにを使用してい:last-childます。

:last-of-type種類が違うので使えません。:last-child他の兄弟 (ドロップダウン メニューなど) がある可能性があるため、機能しません。私のマークアップはそのままで十分に長いので、これ以上クラスを割り当てたくないのです。

私の現在：

BUTTON:last-of-type, 
INPUT:last-of-type { 
    /* Corners */ 
}

私が欲しいもの：

BUTTON:last-of(BUTTON, INPUT), 
INPUT:last-of(BUTTON, INPUT) { 
    /* Corners */ 
}

マークアップの例:

<div class="group">
    <label>Controls:</label>
    <input type="text" />
    <button type="button">Search</button>
</div>

方法はありますか、または代替手段を探す必要がありますか?

4

2 に答える 2

1

これらのフィールドを別のコンテナにバインドするのはどうですか?

デモ

.wrap, .wrap2 {
    float: left;
    width: 200px;
}

.wrap input[type=text], .wrap input[type=button] {
    display: block;
}

.wrap input[type=button]:first-of-type,
.wrap input[type=button]:last-of-type, 
.wrap2 input[type=text]:first-of-type,
.wrap2 input[type=text]:last-of-type {
    border-radius: 8px;
    border: 1px solid #f00;
}

あなたの編集によると

デモ 2

div:first-of-type input[type=text], 
div:first-of-type button,
div:last-of-type input[type=text],
div:last-of-type button {
    border: 1px solid #f00;
    border-radius: 8px;
}

質問を編集し、使用している実際のマークアップを提供すると、最初のグループと最後のグループにあるテキストボックスとボタンにスタイルを適用するように一致する 4 つのセレクターを使用しました

あなたがコメントしたように、余分なマークアップを使用したくない場合は、スタイルを設定するアイテムに定義されたクラスを使用する方がよいでしょう。これにより、複雑なセレクターの使用が妨げられるだけでなく、物事が楽になります。クロスブラウザでもあります。しかし、私が提供したように、解決策 2 はあなたのニーズに非常に適しています。

于 2013-09-06T02:42:54.637 に答える