Question

假设我有以下HTML：

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

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

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

我希望除了第一个之外的所有字段集都有一个上边距，所以我尝试了以下CSS：

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

我一直在使用CSS，尝试不同的东西，但我似乎无法弄清楚如何不选择第一个字段集。

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

我知道这是可以的，所以我该怎么做？

Answer 1

你快到了那里：

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

Fiddle

很遗憾，oldIE（IE8及更早版本）不支持此功能，您可以在this post from CSS Tricks中看到。建议使用一般样式，然后使用:first-child来否定您不想要的样式，例如：

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

#aForm fieldset:first-child {
  margin-top: 0;
}

Answer 2

这对我有用

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

#aForm fieldset:first-child {
        margin-top:0px;
}

Answer 3

您可以使用general sibling combinator来获得更好的浏览器支持：

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

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

Answer 4

您缺少选择器的：

#aForm fieldset:not(:first-of-type) {

如何选择除第一个以外的表单中的所有字段集？

4 个答案: