CSS中通用同级组合器（〜）和子选择器（>）之间的区别 [英] the difference between General sibling combinator (~ )and child selector (>) in css

问题描述

最近几天我一直在阅读有关CSS的文章，并在互联网上搜索了这个问题。

I have been reading about CSS the last couple of days, and searched the internet for this question.

有人可以解释一下（〜）有什么区别吗？和（>）？

Could anyone please explain me whats the difference between (~) and (>)?

推荐答案

一般同级意味着该元素在另一个元素之后，在子元素之后选择器的目标是直接在某些元素内的 。

General sibling means the element is after another element, where the child selector targets elements that are directly inside of certain elements.

兄弟姐妹：

HTML：

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

CSS：

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

孩子：

HTML

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

CSS：

.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 */
}

这篇关于CSS中通用同级组合器（〜）和子选择器（>）之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！