css – 關於LESS中巢狀直接後代的問題
阿新 • • 發佈:2021-09-16
所以我最近正在研究一些程式碼,並試圖瞭解更多有關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
漫思