css中一般同级组合符（~）和子选择器（>；）之间的区别

在过去的几天里，我一直在阅读CSS，并在互联网上搜索这个问题

---

有人能解释一下（~）和（>）之间的区别吗？

一般同级表示元素在另一个元素之后，子选择器的目标是直接位于某些元素内部的元素

兄弟姐妹：

HTML:

儿童：

HTML

---

下面显示了一些示例来说明如何使用CSS选择器…
例如：

上面，选择父元素为div元素的所有p元素 例如：

---

上面，选择每个由p元素进行的ul元素

注意，同级组合器只能匹配以下同级，因此，例如，如果你在

.brother

之前有一个

.sister

，

.brother~。sister

将不匹配。@BoltClock很好，我遗漏了那个细节，我现在就更新我的帖子。嗯，“立即跟随”-这将是

+

（相邻兄弟姐妹）组合符。

~

匹配同一父级中的任何后续兄弟姐妹。仍然不清楚，如果父子示例在直接子级之后有另一个，该怎么办。两个选择器的区别是什么？@MikkelRaicevic Larsen没问题，很高兴我能提供帮助！

<div class="brother"></div>
<div class="sister"></div>

.brother ~ .sister {
    /* This styles .sister elements that follow .brother elements */
}

<div class="parent">
    <div class="child">
        <div class="child"></div>
    </div>
</div>

.parent > .child{
    /* This styles .child element that is the direct child of the parent element;
    It will not style the .child element that is the child of .child */
}

div>p

p~ul