Question

我想做的就是做类似...

<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>

...像这样

Line of class A

Line of class B
Line of class B
Line of class B

Line of class C
Line of class C

Line of class D

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

Answer 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>

Answer 2

您可以为每个类使用javascript的getElementsByClassName（）方法，然后遍历元素，直到到达每个类的最后一个元素，然后在其底端添加空白。

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

#include <iostream>
#include <algorithm>

#define NMAX 500000
#define MOD 1000000007

using namespace std;


long long factorial(long long n)
{
    long long ans = 1;
    for (int i = 2; i <= n; i++)
        ans = ans * i % MOD;
    return ans;
}

long long binPow(long long num, int p)
{
    if (p == 0)
        return 1;

    if (p % 2 == 1)
        return binPow(num, p - 1) * num % MOD;
    if (p % 2 == 0)
    {
        long long b = binPow(num, p / 2);
        return b * b % MOD;
    }
}

void primesFactorize(long long n, long long primes[])
{
    for (int d = 2; d * d <= n; d++)
        while(n % d == 0)
        {
            n /= d;
            primes[d]++;
        }
    if (n > 1) primes[n]++;
}

long long primes1[NMAX];
long long primes2[NMAX];

int main()
{
    long long n, k, m, l;

    cin >> k >> n >> l >> m;

    if (k > l)
    {
        swap(n, m);
        swap(k, l);
    }

    for (int i = n - k + 1; i <= n; i++)
        primesFactorize(i, primes1);

    for (int i = k + 1; i <= l; i++)
        primesFactorize(i, primes1);

    for (int i = m - l + 1; i <= m; i++)
        primesFactorize(i, primes2);

    for (int i = 2; i <= max(n, m); i++)
        primes1[i] = min(primes1[i], primes2[i]);

    long long ans = 1;
    for (int i = 2; i <= max(n, m); i++)
        for (int j = 1; j <= primes1[i]; j++)
            ans = ans * i % MOD;

    ans = ans * binPow(factorial(l), MOD - 2) % MOD;

    cout << ans << endl;
    return 0;
}

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

Answer 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>

Answer 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>

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

4 个答案: