如何抑制同一 CSS 类的段落之间的间距？答案

【问题标题】：How do I suppress spacing between paragraphs of the same CSS class?如何抑制同一 CSS 类的段落之间的间距？
【发布时间】：2018-07-31 16:26:39
【问题描述】：

我想做的是制作类似...的东西

<p class="A">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
<p class="D">Line of class D</p>

...结果如下：

A类线

B类线
B类线
B类线

C类线
C类线

D类线

我已经搞砸了边距、行高和容器 div，但到目前为止没有任何组合对我有用。这可能吗？

【问题讨论】：

标签： css spacing paragraph

【解决方案1】：

您正在寻找基于类的第 n 个子选择器。这在 CSS3 中是不可能的。

我建议您阅读此书以了解您面临的问题：https://medium.com/@MateMarschalko/css-select-nth-element-with-class-a313d080e2bf

但我认为你应该让它变得简单，你可以将你的 <p> 标签包装在一个 <div> 标签中并像这样使用它：

p {
  margin: 0;
  padding: 0;
}

div.a p:last-of-type,
div.b p:last-of-type,
div.c p:last-of-type,
div.d p:last-of-type{
  margin-bottom: 15px;
}

/* Or just div { margin-bottom: 15px; }*/

<div class="a">
  <p>Line of class A</p>
</div>
<div class="b">
  <p>Line of class B</p>
  <p>Line of class B</p>
  <p>Line of class B</p>
</div>
<div class="c">
  <p>Line of class C</p>
  <p>Line of class C</p>
</div>
<div class="d">
  <p>Line of class D</p>
</div>

【讨论】：

这可行，但我犹豫是否必须在每组段落周围添加组 - 其中大多数是正常段落，应该在上方和下方有边距。感谢您的链接！

【解决方案2】：

您可以对每个类使用 javascript 的 getElementsByClassName() 方法，然后循环遍历元素，直到到达每个类的最后一个元素，然后为其添加底部边距。

一个不需要 javascript 的更简单的解决方案是创建一个类，在应用它的元素之后添加空格，然后将该类添加到每个类的最终元素。像这样的：

.add-space {
  margin-bottom: 40px;
}

<p class="A add-space">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B add-space">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C add-space">Line of class C</p>
<p class="D add-space">Line of class D</p>

【讨论】：

【解决方案3】：

您可以尝试包装共享同一类的元素，然后为包装器添加边距。

p {
  margin: 0;
}
.add-space {
  padding-bottom: 20px;
}

    <div class="add-space">
      <p class="A">Line of class A</p>
    </div>
    <div class="add-space">
      <p class="B">Line of class B</p>
      <p class="B">Line of class B</p>
      <p class="B">Line of class B</p>
    </div>
    <div class="add-space">
      <p class="C">Line of class C</p>
      <p class="C">Line of class C</p>
    </div>
    <div class="add-space">
      <p class="D">Line of class D</p>
    </div>

【讨论】：

【解决方案4】：

我你的元素总是按顺序排列的，你可以这样做：

.A ~ .A,
.B ~ .B,
.C ~ .C,
.D ~ .D{
  margin-top:-15px;
}

<p class="A">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
<p class="D">Line of class D</p>

【讨论】：