【问题标题】: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

    但我认为你应该让它变得简单,你可以将你的 &lt;p&gt; 标签包装在一个 &lt;div&gt; 标签中并像这样使用它:

    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>

        【讨论】:

          猜你喜欢
          • 2019-12-14
          • 1970-01-01
          • 2019-02-26
          • 2017-05-06
          • 1970-01-01
          • 1970-01-01
          • 2010-10-08
          • 1970-01-01
          • 2017-09-29
          相关资源
          最近更新 更多