2

CSS：別のフィールドセットの前にフィールドセットにスタイルを指定することは可能ですか？2つのフィールドセットが私のコードに続く場合、それらに特定のスタイルを適用したいと思います。

もちろんクラスとIDを使用せずに編集...

これが私のコードです

        <div id="tabs">
            <fieldset class="one">
                <legend>One</legend>
                Text
            </fieldset>
            <fieldset class="two">
                <legend>Two</legend>
                Text
            </fieldset>
        </div>

これは私にこれを与えます：

ここに画像の説明を入力してください

そして私はこれが欲しいです：

ここに画像の説明を入力してください

4

5 に答える 5

2

クラスやIDを使用せずfirst-childに、最初のクラスまたはIDをターゲットにしてから、2番目のデフォルトのスタイルを使用できます。

例えば

form fieldset{ background: green; }
form fieldset:first-child{ background: red; }

最初のフィールドセットの背景は赤になり、他のフィールドセットの背景は緑になります。ただし、これは同じフォーム内のフィールドセット用です。それらが別々の形式である場合は、form:first-child

于 2012-06-13T15:00:02.587 に答える
2

CSSを使用すると、任意の要素またはその兄弟の子にのみスタイルを適用できます。そのため、隣接する兄弟セレクターfieldsetを使用して、2番目にのみスタイルを適用できます。+次のデモでは、その方法を示します。

仕様を読んで理解できる可能性のあるすべてのCSS2セレクターについて：cssセレクターで作成できるものとできないもの

dabblet.comでの私の説明デモは、問題の解決に役立つ可能性があります。

結果：
ここに画像の説明を入力してください

HTMLマークアップ：

<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>

CSSマークアップ：

/* detect only first fieldset */
fieldset:first-child {
    background-color: green;
}

/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
    background-color: gray; 
}

/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
    background-color: red;
}
于 2012-06-13T15:25:20.147 に答える
0

IDまたはクラス名の使用を避けたい場合は、first-childプロパティを選択してください。

たとえば-

form fieldset:first-child{
  //your css code here
}
于 2012-06-13T15:11:00.040 に答える
0

それぞれに特定のクラスまたはIDを割り当ててみませんか？

<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>
于 2012-06-13T14:57:26.327 に答える
0

クラスやIDを使用したくないが、それでも異なるスタイルを使用したい場合は、フィールドセットごとにインラインCSSを使用するのはどうでしょうか。

CSSを使用したいのに、クラスとIDを避ける特に正当な理由はありますか？もう少し詳しく説明すると、おそらくより良い答えが得られます。

于 2012-06-13T15:18:30.643 に答える