关于LESS中嵌套直接后代的问题

Question

所以我最近正在研究一些代码,并试图了解更多有关LESS的信息,而且有一件事我无法完全理解.我看到使用结构如下的东西:

.class{
    >*{
        /*some css*/
    }
}

注意:>*{}嵌套在.class块内

我想知道这是做什么的,但有一些我不明白的事情.

我认为它在做什么:我假设它正在接受该类的所有直接后代并相应地设置它们.所以实际(编译)的CSS可能是这样的.class > *{}

我的问题:

1. 在我的假设中,我是正确的,还是在做一些完全不同的事情？

2. 如果这是正确的,为什么这个声明不需要像其他连接一样在&前面？

我很抱歉,如果这是以前出现的事情,我只是不知道还有什么其他方式来问谷歌同样的问题.

Answer 1

1. 你的假设是正确的.

2. 在&可以从嵌套选择器,与像一个组合子开始被省略>或+,或者与化合物选择器,其中预期的结果是后代组合子启动,如

   .a { .b {} }
   

   导致.a .b.

Answer 2

它实际上很简单：

嵌套选择器元素始终与空格组合。例如^[1a]：

a {
   b {}
}

结果是：

a b {}

同样的方式，^[1b]: :

a {
   > b {}
}

结果是：

a > b {}

ETC。

---

&仅当您需要抑制该空格时才必须使用，如^{[2a] 中所示：}

a {
    &:hover {}
}

为了：

a:hover {}

或者如果父选择器元素不放在前面，^[2b]：

a { 
   b & {}
}

c { 
   & & {}
}

d {
  & {}
}

e { 
   f ~ g:not(&) > & & + &&& {}
}

// etc.

导致：

b a {}
c c {}
d {}
f ~ g:not(e) > e e + eee {}

---

组合器不会影响任何东西，唯一的要求是组合器后面必须跟有标识符，例如：

a { > b {} } // ok
a > { b {} } // error