CSS中* + *选择器的含义是什么？附示例代码解析

先看你提到的这段CSS代码：

div * + * {
  margin-top: 1em;
}

你已经知道div *是选中div下的所有子元素，+是相邻兄弟选择器（选中紧接在某个元素后的同级元素），那* + *的意思拆解一下：

• 第一个*：匹配任意类型的元素
• +：表示“紧跟在后面的同级元素”
• 第二个*：同样匹配任意类型的元素

合起来就是：选中所有「前面有同级元素」的任意元素——换句话说，就是父容器里除了第一个子元素之外的所有子元素。

放到div * + *里，就是给div下的所有非第一个子元素添加上margin-top: 1em的样式。这种写法的好处是不用给每个子元素单独加间距，也不会让第一个子元素和div顶部产生多余的margin，能轻松实现子元素之间的均匀垂直间距。

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