如何將僞類應用於LESS中的某些元素

Question

我不知道我是否將標題命名爲正確或具有正確的術語，但我正在使用LESS。

我想要的是在某些<ul>上應用箭頭，而默認值爲無樣式。因此，無論何時我需要箭頭，我都想以某種方式在代碼中明確地這樣說。

我嘗試添加名爲.arrow僞類：

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

li { 
    .arrow{ 
    content: ""; 
    border-color: transparent #111; 
    border-style: solid; 
    border-width: 0.35em 0 0.35em 0.45em; 
    display: block; 
    height: 0; 
    width: 0; 
    left: -1em; 
    top: 0.9em; 
    position: relative; 
    } 
} 

然後嘗試應用這樣的：

<ul className="arrow"> 
    <li><span className="ink-badge black small">Consulting</span></li> 
</ul> 

，但沒有運氣。我沒有這樣做;這裏有什麼想法？

Answer 1

className是IDL屬性。在HTML中，您應該使用內容屬性，稱爲class。

而.arrow是一個類選擇器，而不是僞類。

而在選擇器中，將祖先放在左邊（LESS的外部塊）。

body { 
 
    margin-left: 2em; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.arrow > li { 
 
    content: ""; 
 
    border-color: transparent #111; 
 
    border-style: solid; 
 
    border-width: 0.35em 0 0.35em 0.45em; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    left: -1em; 
 
    top: 0.9em; 
 
    position: relative; 
 
}

<ul class="arrow"> 
 
    <li><span class="ink-badge black small">Consulting</span></li> 
 
</ul>