Question

简短版本：只有在CSS元素后接其他特定元素的情况下，才可以将样式应用于HTML元素吗？

长版： 情况如下：我正在使用帮助创作工具（MadCap Flare）创建内容。假设我有以下代码：

<ol>
 <li>First li</li>
 <li>Second li</li>
</ol>
<p>A (conditional) paragraph.</p>
<ol>
 <li>Third li</li>
 <li>Fourth li</li>
</ol>

我们也可以说ol的底边距为8px，而li的底边距为2px。

根据某些条件，中间的段落可能不会显示在我的输出中。如果该段存在，则将使用ol的余量。没问题。

但是，如果该段落不存在，我希望ol元素的边距较小-li元素只有2px。在这种情况下，我希望它看起来只有一个列表。

我的理想解决方案是，当且仅当后面跟随另一个ol时，才给ol一个2px的边距。有没有办法用CSS做到这一点，还是我必须以其他方式进行调整？

Answer 1

为什么不对此有所不同，而是将边距移至p元素。因此，ol将有margin-bottom的{{1}}（最后一个2px），并且如果有li元素，您将添加p 6px的边距以拥有p的边距：

8px

ol {
  margin:0;
}

li {
  margin-bottom:2px;
}
ol + p {
  margin-top:6px;
  margin-bottom:8px;
}

如果它可以是<ol> <li>First li</li> <li>Second li</li> </ol> <p>A (conditional) paragraph.</p> <ol> <li>Third li</li> <li>Fourth li</li> </ol> <ol> <li>First li</li> <li>Second li</li> </ol> <ol> <li>Third li</li> <li>Fourth li</li> </ol>以外的任何元素，则可以尝试以下操作：

ol {
  margin:0;
}

li {
  margin-bottom:2px;
}
ol + *:not(ol) {
  margin-top:6px;
  margin-bottom:8px;
}

根据以下元素，将样式应用于CSS中的元素

1 个答案: