1

Suppose I have the following HTML:

<form id="aForm">
    <fieldset>
        <legend>fieldset 1</legend>
    </fieldset>

    <fieldset>
        <legend>fieldset 2</legend>
    </fieldset>

    <fieldset>
        <legend>fieldset 3</legend>
    </fieldset>
</form>

I want all of the fieldsets except the first to have a margin above them, so I tried the following CSS:

#aForm fieldset:not(first-of-type) {
    margin-top: 50px;
}

I keep fiddling around with the CSS, trying different things, but I can't seem to figure out how to not select the first fieldset.

JSFiddle: http://jsfiddle.net/nLwyK/

I know this is possible to do, so how do I do it?

4

4 に答える 4

5

あなたはほとんどそこにいました：

#aForm fieldset:not(:first-of-type) {
    margin-top: 50px;
}

フィドル

残念ながら、 CSS Tricksのこの投稿でわかるように、これは oldIE (IE8 以前) ではサポートされていません。一般的なスタイリングを使用:first-childしてから、不要なスタイルを無効にするために使用することをお勧めします。次に例を示します。

#aForm fieldset {
  margin-top: 50px;
}

#aForm fieldset:first-child {
  margin-top: 0;
}
于 2013-09-13T20:09:11.610 に答える
2

これは私のために働いた

#aForm fieldset{
    margin-top: 50px;
}

#aForm fieldset:first-child {
        margin-top:0px;
}
于 2013-09-13T20:09:02.907 に答える
2

代わりに、ブラウザのサポートを向上させるために、一般的な兄弟コンビネータを使用できます。

#aForm fieldset ~ fieldset {
   margin-top: 50px;
}

http://jsfiddle.net/nLwyK/2/

于 2013-09-13T20:09:11.433 に答える
2

セレクターの : がありません

#aForm fieldset:not(:first-of-type) {
于 2013-09-13T20:09:12.467 に答える