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