css 选择器 + 空格 这三个有什么区别

选择器表示选择直接子元素，+ 选择器表示选择紧接在前面同级元素中的第一个元素，而空格选择器表示选择任何深度的后代元素。

例如，考虑以下 HTML：

<div class="parent">
  <div class="child-1">
    <div class="grandchild"></div>
  </div>
  <div class="child-2"></div>
</div>

如果我们使用以下 CSS 选择器：

.parent > .child-1 {}

这将选择直接在 .parent 元素下的 .child-1 元素。

如果我们使用以下 CSS 选择器：

.child-1 + .child-2 {}

这将选择在 .child-1 元素之后紧接着的 .child-2 元素。

如果我们使用以下 CSS 选择器：

.parent .grandchild {}

这将选择在 .parent 元素下任何深度的 .grandchild 元素。