在CSS中定位具有字幕兄弟的标题[重复]答案

【问题标题】：Target a title having a subtitle sibiling in CSS [duplicate]在CSS中定位具有字幕兄弟的标题[重复]
【发布时间】：2022-10-14 21:21:03
【问题描述】：

我想删除底部title 的边距仅以防万一它有一个subtitle在它的旁边.

可能与Is there a "previous sibling" selector? 有关，但那个问题不回答我的问题。

.title, .subtitle {
  border: 1px solid black
}
.title + .subtitle {
  background: yellow;
  margin-top: 0;  
}

<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>

【问题讨论】：

IDs 在 HTML 文档中必须是唯一的。
我没有说我上面的评论会神奇地解决你的问题。这是一个非常重要的注释，您应该考虑。
为什么您认为您引用的帖子不完全符合您的要求？
这可能相关是一个完美的副本（请务必阅读那里的所有答案）
.title + .subtitle -目标在该规则中，它实际应用的元素仍然是.subtitle（您的示例中的背景颜色已经清楚地证明了这一点） - 所以如果你知道h3 有多少下边距，您可以应用相同数量的消极的margin-top 到.subtitle 现在，把它拖回来......

标签： css

【解决方案1】：

不确定那是你需要的。尝试这个？

/* 
This is a common technique called a CSS reset. 
Different browsers use different default margins, causing sites to look different by margins.
The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers. 
*/

* {
  margin: 0;
  padding: 0;
}

/* 
The comma groups classes (and applies the same style to them all. Just use the individually).
*/

.title {
  margin-bottom: 0;
  border: 1px solid black
}

.subtitle {
  margin-bottom: 1rem;
  background: yellow;
  border: 1px solid black
}

p {
  margin-bottom: 1rem;
}

【讨论】：