Less學習筆記5 匹配模式

2021-09-01 10:33:59 字數 1345 閱讀 7206

比如:用css去畫乙個三角

.********

這個時候在頁面上會出現乙個朝下的紅色三角形,

如果想讓三角形朝上修改**中的

border-color: transparent transparent red transparent;
但是在ie中,此時的小三角會出現乙個黑色的小背景

此時的處理:根據三角的方向,對border-style進行更改

border-style: dashed dashed dashed solid;最後總結:乙個朝下的三角形的**為:

.********

在專案中,有時候會有朝上的三角,有時會有朝下的三角,如果乙個乙個寫,就太麻煩了。

此時就用到了匹配模式

// 朝下的三角(三角的朝向和有顏色的方向相反)

.********(bottom,@width:5px,@color:#ccc)
// 朝上的三角(三角的朝向和有顏色的方向相反)

.********(bottom,@width:5px,@color:#ccc)
//朝左的三角(三角的朝向和有顏色的方向相反)

.********(left,@width:5px,@color:#ccc)
//朝右的三角(三角的朝向和有顏色的方向相反)

.********(right,@width:5px,@color:#ccc)
使用:

.test_********
但是此時,三角沒有設定width , height 和overflow

所以:這裡就需要設定不管選了哪個方向的三角形,都要帶上這三個屬性,此時:

再加乙個匹配:

.********(@_,@width:5px,@color:#ccc)

注意:在這裡的匹配中:@width:5px,@color:#ccc 這兩個引數必須要寫上,不能缺少

然後在使用的時候,就沒有不要再寫寬度,高度了

// 匹配模式:定位

.pos(r)
.pos(a)
.pos(f)

使用:

.pipe

03 匹配一組字元(學習筆記)

只想匹配 na sa,不想匹配其他的。const str sales1.xls n orders3.xls n sales2.xls n sales3.xls n apac1.xls n europe2.xls n na1.xls n na2.xls n ca1.xls n sa1.xls cons...

html5匹配不同解析度樣式

abc media screen and min width 1201px 設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 media screen and max width 1200px 設定了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 media scree...

推薦系統筆記二 匹配演算法和實踐(part1)

如youtube2016年發表的 deep neural networks for youtube recommendations所示,match和rank兩部分 cf就是收集許多其他使用者的偏愛資訊來對該使用者的興趣進行 從數學角度來看,就是乙個矩陣補全問題,如下圖所示 如何補全上圖中的問號處的值...