less封裝樣式有規律的類選擇器 遁地龍捲風

2021-10-07 16:55:09 字數 737 閱讀 5045

1.解決的問題

.class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css樣式

.p2 

.p1

2.less **

.class-rule(@name,@number,@rest) when(@number > 0)@

.class-rule(@name,@number - 1,@rest);

.setattribute(@index,@number,@rest,@name) when(@index > 0):@initialvalue * @number;

.setattribute(@index - 1,@number,@rest,@name);

}}

.class-index(p,3,animation-delay 0.1s );

.class-index(p,3,animation-delay 0.1s width 20px);

*@number 需大於1

animation-delay 0.1s

這樣的引數會被認為是乙個列表,列表中有兩個元素,下標從1開始

.class-rule和.setattribute都會在第二個引數大於0的時候遞迴呼叫自己

前者用於類選擇器的輸出後者用於樣式的輸出

重寫css類選擇器的樣式

本篇以自己搭建註冊頁面遇到的問題作為展示,來解釋如何重寫css類選擇器的樣式 原有的css樣式 類選擇器 account 展示效果。此時的form表單邊框為黑色,寬度比較小,無背景色 在對應的web頁面head標籤中新增style標籤,在style標籤對樣式進行重寫。css樣式重寫時,已經定義過的屬...

HTML5選擇器,類樣式

選擇器 css的選擇器怎麼用,這裡就怎麼用 document.queryselector 選擇器 只能獲取乙個,預設第乙個 var op document.queryselector div p op.style.backgroundcolor yellow document.queryselect...

CSS選擇器的基本樣式

作用是什麼 設定如何顯示 html 標籤。語法結構是什麼 第一種 選擇器 說明 這種方式的css樣式表由選擇器以及一條或多條宣告兩個部分組成 該種樣式表只能定義在style 標籤或css 檔案中,每個style標籤或css檔案可定義多個css樣式表 第二種 style declaration1 de...