CSS 组合器：关于 CSS 的一切 ~ 选择器。学习 CSS 2022

📌 什么是组合子？

1.后代选择器

2. 子选择器（ > ）

3. 相邻兄弟选择器 (+)

4. 通用兄弟选择器（~）

📌 总结

2022 CSS 组合器完整指南。您可以在此博客中找到有关 CSS 组合器的所有信息。

嘿👋，我是 Kunaal。本文将讨论 CSS 组合器，或者你可能见过类似的div ~ span，div > p这正是我们今天要讨论的内容。所以，事不宜迟，我们开始吧。

📌 什么是组合子？

这些是简单 CSS 选择器的组合。我的意思是什么？指的是类选择器、ID 选择器，甚至标签选择器——CSS 中的所有内容都是简单选择器，而当我们使用多个选择器时，就构成了组合选择器。例如：

div和p是简单的选择器，但它们一起div p现在是组合选择器。

基本上，组合器选择器定义了选择器之间的关系。

1.后代选择器

它基本上会选择指定元素内部或后代的所有元素。例如

div p {
   color : red;
}

<p>它将为元素内部的所有元素<div>（包括所有嵌套元素）添加颜色/样式<p>。嵌套元素是指嵌套在容器中的元素，例如

<div>
    <p>Paragraph</p>
    <h1><p>Nested Paragraph</p><h1>
</div>

2. 子选择器（ > ）

它选择指定元素内的所有元素（不包括嵌套元素）。例如，

div > p {
   color: red;
}

因此，上面的例子将选择元素<p>的所有元素<div>，但不会影响嵌套<p>元素。

3. 相邻兄弟选择器 (+)

相邻兄弟选择器选择指定元素紧邻其后的元素。例如，

div + p {
   color: red;
}

因此，上述代码将仅选择<p>紧跟该<div>元素之后的元素。示例 -

4. 通用兄弟选择器（~）

这是最后一个，它选择指定元素之后的所有元素。例如，

div ~ p {
  color: red;
}

<p>上面的例子将选择元素之后的所有元素<div>。例如 -

📌 总结

就这样吧。关于 CSS 组合器的内容就到这里，希望你喜欢这篇文章，并且对你有所帮助。如果你喜欢它，或者不想错过更多有趣的 Web 开发技巧和窍门，可以关注我的Instagram ，或者如果你想精通 Web 开发，也可以订阅我的YouTube频道。

感谢阅读