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

更新日期: 2018-12-06 阅读次数: 1662 分类: 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 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2019年10月22日 世界传统医药日
2019年10月24日 霜降
2019年10月24日 联合国日
2019年10月31日 世界勤俭日
2019年11月01日 万圣节
2019年11月08日 立冬
2019年11月08日 中国记者日
2019年11月10日 世界青年节
2019年11月11日 光棍节,双十一购物节
2019年11月14日 世界糖尿病日
2019年11月17日 国际大学生节
2019年11月20日 国际儿童日
查看更多节日