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

更新日期: 2018-12-06 阅读次数: 4081 分类: CSS

例如,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 上方间距不够。如图:

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

正确的做法是

.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 聊聊, 查看更多联系方式