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

时间:2021-09-16
本文章向大家介绍css – 关于LESS中嵌套直接后代的问题,主要包括css – 关于LESS中嵌套直接后代的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
所以我最近正在研究一些代码,并试图了解更多有关LESS的信息,而且有一件事我无法完全理解.我看到使用结构如下的东西:
.class{
    >*{
        /*some css*/
    }
}

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

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

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

我的问题:

>我的假设是正确的,还是做了完全不同的事情?
>如果这是正确的,为什么这个陈述不需要&像其他连接一样在它面前?

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

 
它实际上很简单:

嵌套的选择器元素总是与空格结合.例如. [1A]:

a {
   b {}
}

结果是:

a b {}

同样的,[1b]:

a {
   > b {}
}

结果是:

a > b {}

等等

&安培;只有在需要抑制空格时才必须使用,如[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
 
漫思

原文地址:https://www.cnblogs.com/sexintercourse/p/15299731.html