html - 如何让一个 CSS 类制作两个文本行，如标题和副标题？

Question

我的代码目前看起来像这样:

.data-title {
  font-weight: bold;
}

.data-content {
  color: gray;
}

<p class="data-title">
  Title
</p>
<p class="data-content">
  Content
</p>

结果是我想要的样子:

不过，我想做以下两点改动:

1. 减少元素之间的边距。
2. 在父元素上使用一个类，而不是在段落上使用两个类，自动识别第一行和第二行并应用当前样式。

<div class="my-class">
  <p>Title</p>
  <p>Content</p>
</div>

Answer 1

您可以使用 :first-child 选择器来选择第一个元素，然后将其与 + * 选择器组合以获取其后的元素。要减少边距，只需将 margin: 0(或您认为合适的任何值)设置到 div 中的所有段落元素(或者您可以将它们仅添加到您已经选择，取决于是否有任何其他段落应保留其边距)。

.my-class span {
  display: block;
}

.my-class :first-child {
  font-weight: bold;
}

.my-class :first-child + * {
  color: gray;
}

<div class="my-class">
  <span>
    Title
  </span>
  <span>
    Content
  </span>
</div>