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>

标签： htmlcss

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>