在 CSS3 中，选择器间的空格与没有空格表示不同的选择逻辑：
1、有空格的选择器：空格表示后代选择器。它选择的是某个元素的所有符合条件的后代元素。
div p {color: red;
}
这个选择器表示选择所有 div 元素内部的 p 元素，无论 p 元素是在 div 的直接子级还是更深的子级。
2、没有空格的选择器：没有空格通常表示一个复合选择器，它选择的是同时符合所有选择器条件的元素。常见的复合选择器包括直接子选择器、兄弟选择器和属性选择器。
- 直接子选择器 (>)：选择的是某个元素的直接子元素。
div > p {color: blue;
}
这个选择器表示选择所有 div 元素的直接子级 p 元素。
- 一般兄弟选择器 (~)：选择的是某个元素后面的所有兄弟元素。
h1 ~ p {color: green;
}
这个选择器表示选择所有在 h1 之后的 p 元素，无论是否直接相邻。
比如：
<div><h1>Heading</h1><p>Paragraph 1</p><div>Some other element</div><p>Paragraph 2</p>
</div>
在这个例子中，选择器 h1 ~ p 会选中 “Paragraph 1” 和 “Paragraph 2”，因为它们都是 h1 之后的兄弟 p 元素。
- 相邻兄弟选择器 (+)：选择的是某个元素的下一个相邻兄弟元素。
h1 + p {color: yellow;
}
这个选择器表示选择紧跟在 h1 后面的第一个 p 元素。
- 属性选择器：选择具有特定属性的元素。
a[href] {color: purple;
}
这个选择器表示选择所有具有 href 属性的 a 元素。
- 总结：
空格：表示后代选择器，用于选择某个元素的所有后代元素。
没有空格：通常用于复合选择器，表示选择同时符合多个条件的元素，如直接子选择器、兄弟选择器和属性选择器。