&可以產(chǎn)生列表中的選擇器的所有可能的排列,用逗號(hào)分隔。
下面的例子演示了使用&生成LESS文件中所有可能的選擇器排列:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Combinatorial Explosion</title> </head> <body> <p>This is first paragraph.</p> <p>This is second paragraph which is adjecent to first paragraph ( i.e. p + p ). This will be highlighted.</p> <div> This div is adjecent to second paragraph ( i.e. p + div ). This will be highlighted. </div> <p>This is third paragraph adjecent to div ( i.e. p + div ). This will be highlighted.</p> <i>This is italic. This will not be highlighted since there is no (p + i) in CSS</i> <div>This is second div</div> <div>This is div adjecent to second div ( i.e. div + div ). This will be highlighted</div> </body> </html>
接下來(lái),創(chuàng)建文件 style.less 。
p, div { color : red; font-family:Lucida Console; & + & { color : green; background-color: yellow; font-family: "Comic Sans MS"; } }
您可以使用以下命令將 style.less 編譯為 style.css :
lessc style.less style.css
接下來(lái)執(zhí)行上面的命令,它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:
p, div { color: red; font-family: Lucida Console; } p + p, p + div, div + p, div + div { color: green; background-color: yellow; font-family: "Comic Sans MS"; }
讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:
將以上html代碼保存在 combinatorial_explosion.html 文件中。
在瀏覽器中打開(kāi)此HTML文件,將顯示如下輸出。
更多建議: