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

-2

我不知道我是否將標題命名爲正確或具有正確的術語，但我正在使用LESS。如何將僞類應用於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>

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

來源

2016-06-07 PositiveGuy

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>

來源

2016-06-07 20:53:29 Oriol

的className爲React.js。 – PositiveGuy

也我想利用少。你所展示的只是普通的css，肯定有一個模式或東西可以讓這個更好的更少？僞類或類似的東西 – PositiveGuy

@WTF如果您使用一些自定義庫或框架將'className'內容屬性轉換爲'class'，然後正確標記您的問題。我使用普通的CSS，因爲堆棧片段不編譯LESS（在這種簡單的情況下使用它的意義是什麼？），但是我將它包含在解釋中。 – Oriol

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

回答

相關問題