欧美成人片一区二区三区,久久碰人妻一区二区三区,久久婷婷激情综合色综合俺也去,狂野欧美性猛交免费视频,久久夜色精品国产亚洲

04
2023/11

Less——嵌套與繼承

發(fā)布時間:2023-11-04 17:03:41
發(fā)布者:MaiMai
瀏覽量:
0

相比于傳統(tǒng)的css,LESS增加了幾個核心功能,如變量、混合、函數(shù)等,讓頁面的樣式動態(tài)起來了。上一章介紹了LESS中函數(shù)的使用和規(guī)范,本章來介紹一下LESS的嵌套與繼承。

一,嵌套

Less 提供了使用嵌套代替層疊或與層疊結(jié)合使用的能力。我們之前選擇器層疊使用如圖所示:

傳統(tǒng)css選擇器層疊

結(jié)構(gòu)復(fù)雜且冗余,編寫起來十分不方便,而Less的嵌套寫法如圖:

less嵌套寫法

用 Less 書寫的代碼更加簡潔,并且結(jié)構(gòu)上更符合 HTML 的組織結(jié)構(gòu)。

在嵌套規(guī)則中, & 表示父選擇器,常用于給現(xiàn)有選擇器添加偽類。如圖:

用&表示父選擇器

編譯后的代碼為

.fanhui img {margin-right : 9px;}


二,繼承

繼承可讓多個選擇器應(yīng)用同一組屬性,最終編譯為并集選擇器。其性能比混合高,但靈活性比混合低。

繼承

編譯后的代碼為:

ul li {

  background: blue;

}

.red,

ul li {

  color: red;

}

關(guān)鍵詞:
返回列表