Question

假设我有3个字段集，除了最后一个字段集外，我希望所有字段集都有30px的余量。

.wrapper fieldset {
  margin-bottom: 30px;
}

.wrapper fieldset:last-of-type {
  margin-bottom: 0;
}

<div class="wrapper">
  <fieldset>...</fieldset>
  <fieldset>...</fieldset>
  <fieldset>...</fieldset>
</div>

没关系，但现在如果我的字段集包含在一个任意元素中，例如：

<div class="wrapper">
  <ANY>
    <fieldset>...</fieldset>
  </ANY>

  <ANY>
    <fieldset>...</fieldset>
    <fieldset>...</fieldset>
  </ANY>
</div>

现在我在第一个字段集上没有边距。我知道为什么会这样，但我不知道解决方案。任何帮助都会受到赞赏，欢呼。

Answer 1

这是一个有效的例子。需要考虑多个元素，这就是需要考虑字段集的容器的原因。

＆＃13;

.wrapper fieldset {
  margin-bottom: 30px;
}

.wrapper *:last-child fieldset:last-of-type {
  margin-bottom: 0px;
  color: pink;
}

＆＃13;

<div class="wrapper">
  <div>
    <fieldset>#1 element</fieldset>
  </div>

  <div>
    <fieldset>#2 element</fieldset>
    <fieldset>#3 element</fieldset>
  </div>

  <footer>
    <fieldset>#4 element</fieldset>
    <fieldset>#5 element</fieldset>
  </footer>

  <div>
    <fieldset>#6 element</fieldset>
  </div>
</div>

＆＃13;

Answer 2

尝试only-child选择器。 jsbin

.wrapper fieldset {
  margin-bottom: 30px;
}

.wrapper fieldset:last-of-type {
  margin-bottom: 0;
}

.wrapper fieldset:only-child {
  margin-bottom: 30px;
}

：类型由另一个元素包装时的last-of-type

2 个答案: