css - 试图理解 css3 语法

Question

msub > *:first-child:after, msub > * + *:before { ... }

这是我试图理解的 css 文件中的代码片段。

msub 是元素。

• > 这，大于，适用于 msub 的直接子元素
• 对这种类型的所有元素执行此操作
• :first-child 对 msub 的所有第一个孩子执行此操作

他们为什么要做第一个孩子的>和第一个孩子的 :first- child ？

Answer 1

>表示“所有孩子”而不是“第一个孩子”。

:first-child表示“其父级的第一个子级”而不是“前一个组合器之前的选择器的第一个子级”

<msub>
    <a>
        <b></b>
    </a>
    <c></c>
</msub>

msub *:first-child会选择aandb因为他们都是他们父母的第一个孩子并且都是msub.

msub > *会选择a并且c因为他们都是msub

msub > *:first-child只选择a.

Answer 2

msub- 元素
>- 目标父元素的直接子元素（不是子元素的子元素）
*- 获取所有子元素
:first-child- 仅获取第一个子元素

CSS 通过选择器向后工作，因此：

从作为 parent 的直接后代的所有元素中获取第一个子元素msub。