css3 中选择器间有空格与没空格的区别？

在 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 元素。

• 总结：

空格：表示后代选择器，用于选择某个元素的所有后代元素。
没有空格：通常用于复合选择器，表示选择同时符合多个条件的元素，如直接子选择器、兄弟选择器和属性选择器。