1

假设我有以下 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/

我知道这是可能的，那么我该怎么做呢？

4

4 回答 4

5

你几乎在那里：

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

小提琴

不幸的是，这在 oldIE（IE8 和更早版本）中不受支持，正如您在CSS Tricks 的这篇文章中看到的那样。一个建议是使用一般样式，然后用于: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 回答