其實偽類嵌套和屬性嵌套非常類似,只不過他需要借助`&`符號一起配合使用。我們就拿經典的“clearfix”為例吧:
.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }
編譯出來的 CSS:
clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
避免選擇器嵌套:
為了防止此類情況,我們應該盡可能避免選擇器嵌套。然而,顯然只有少數情況適應這一措施。
在編輯器第2行輸入正確的代碼,使編譯出來的CSS代碼如下:
.box:before{ content:"偽元素嵌套"; }
參考代碼如下:
.box{
&:before {
content:"偽元素嵌套";
}
}
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報