css - css中后续兄弟组合符(~)和子选择符(>)的区别

Question

<分区>

Answer 1

一般兄弟意味着元素在另一个元素之后，其中子选择器的目标元素是直接在某些元素内。

sibling :

HTML:

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

CSS:

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

children :

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