CSS中lobotomized owl与:not(:first-child)选择器的差异探讨

它受欢迎可不只是写法“看起来有特点”，核心优势其实很实用：

• 极简的通用间距控制：不用给每个子元素加类，就能快速给同级元素之间加上均匀间距，不管是搭原型还是做基础布局都省事儿
• 减少冗余代码：比起给每个需要间距的元素单独写样式，一行代码就能搞定所有同级元素的间距，不用重复写一堆margin-top
• 适配动态内容：如果页面内容是动态生成的（比如后端渲染的列表、新增的组件），不管加多少同级元素，间距都会自动生效，不用额外改样式

先看两个写法的代码：
第一种：

div > * + * {margin-top: 20px;}

第二种：

div > *:not(:first-child) {margin-top: 20px;}

两者的差异主要在这几点：

• 匹配逻辑不一样：
  • * + *是相邻兄弟选择器，只匹配前面有直接相邻的同级元素的元素——简单说就是从第二个元素开始，但得和前一个元素紧挨着，中间不能插文本、注释这类非元素节点
  • :not(:first-child)是伪类组合，匹配所有不是父元素第一个子节点的元素，不管它前面是不是元素节点，哪怕前面是一段文字或者注释，只要它不是第一个子节点，就会被选中
• 特殊场景表现不同：
  比如div里先写了一段文字，再放子元素：<div>这是一段文本<p>第一个子元素</p><p>第二个子元素</p></div>
  这时候div > * + *只会给第二个<p>加margin-top，而div > *:not(:first-child)会给第一个<p>也加margin-top，因为它不是div的第一个子节点（第一个是文本节点）
• 兼容性细微差别：
  两者兼容性都很好，但:not()和:first-child在IE8及以下不支持，而相邻兄弟选择器+在IE7就支持了——不过现在这类老浏览器基本没人用了，这点差异可以忽略

内容的提问来源于stack exchange，提问作者maeros