css - 在使用 `&` 选择直接子级时，我应该使用 `>` 吗？

Question

在写得少的时候，我注意到以下两个片段:

A.

.parent-el {
   & > .direct-child { ... }
}

B.

.parent-el {
   > .direct-child { ... }
}

将生成完全相同的 css:

.parent-el > .direct-child {
   ...
}

我有几个问题:

• A 和 B 之间有什么区别吗？
• 这是有意设计的吗？
• 我应该使用哪一个，为什么？

Answer 1

A和B有区别吗？

编译后的 CSS 不会有任何区别。 LESS 中的 & 在编译后的 CSS 中被替换为外部选择器。所以，A 和做一样:

.parent-el {
    .parent-el > .direct-child { ... }
}

当然，这是多余的，并且首先违背了使用 LESS 的目的。

这是有意设计的吗？

& 确实没有被使用，因为我相信它在您的示例中是有意的。在 LESS 中使用 & 的一个很好的例子是这样的:

.parent-el {
    // define .parent-el styles
    &__child { 
        // define .parent-el__child styles
    }
}

在上面的示例中，& 允许您缩短.parent-el__child 的声明。

我应该使用哪一个，为什么？

你应该使用B。在这种情况下，使用 & 是多余且不必要的。