时间戳

首页 > 解决方案 > 如何抑制同一 CSS 类的段落之间的间距？

css - 如何抑制同一 CSS 类的段落之间的间距？

问题描述

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

<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，但到目前为止，没有任何组合对我有用。这可能吗？

标签： cssspacingparagraph

解决方案

您正在寻找基于类的第 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>

推荐阅读