区域内指定 element 的第一个，样式与后面的同类 element 不同

例如，article-content div 内，第一个 h2 标签不需要设置 margin-top，可以这样实现

.article-content h2 {
	font-size: 1.6em;
	border-bottom: 1px solid #ddd;
	padding-bottom: .1em;
	margin-bottom: 2.4rem;
}

.article-content h2 ~ h2 {
	margin-top: 2.2em;
}

确实能达到预期的效果，但是这语法根本看不懂，也记不住。。。

但是，这样做，漏掉了一种情况，即 h2 不是第一个元素，有可能 p 是第一个元素，h2 在 p 后面。 这就造成，非文章首部的第一个 h2 上方间距不够。如图：

正确的做法是

.article-content h2 {
	font-size: 1.6em;
	border-bottom: 1px solid #ddd;
	padding-bottom: .1em;
	margin-bottom: 2.4rem;
	margin-top: 2.2em;
}

.article-content h2:first-child {
	margin-top: 0.2em;
}

• h2:first-child 代表，这是第一个元素，并且是 h2.
• 容易混淆的是 h2:first-of-type，这代表第一个 h2 元素，但不一定是第一个元素

参考

• https://stackoverflow.com/questions/23248432/css-first-child-on-specific-element
• https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式