在 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 元素。
- 总结:
空格:表示后代选择器,用于选择某个元素的所有后代元素。
没有空格:通常用于复合选择器,表示选择同时符合多个条件的元素,如直接子选择器、兄弟选择器和属性选择器。