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
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM