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

更新日期: 2018-12-06 阅读次数: 2113 分类: 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
领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日