這個(gè)是如何實(shí)現(xiàn)的呢?

影子江湖

就是CSS罷了

Benisme

1. <span>標(biāo)簽1</span><span>標(biāo)簽2</span><span>標(biāo)簽3</span>
   
2. <style>span{background:#155BD5;display:inline-block;border-radius:2px;padding:2px 4px;}</style>

復(fù)制代碼

三姐

ysx24 發(fā)表于 2024-12-19 16:59
說(shuō)的這個(gè)吧，不用找了，早就下架了

三姐

Benisme 發(fā)表于 2024-12-19 21:03

這個(gè)我有試過(guò)的 是可以的,但是我的是動(dòng)態(tài)多選項(xiàng),而且字段選項(xiàng)比較多,沒(méi)選的就不需要顯示

9527

因?yàn)榉诸愋畔⒆侄文J(rèn)是用&nbsp;分割的，所以CSS無(wú)法單選里面的字段，不過(guò)可以用JS正則匹配加以<span>包裹每個(gè)字段，這樣就可以用CSS去美化各字段了。
例如：
<td id="myTd">無(wú)任何限制&nbsp;對(duì)話次數(shù)限制&nbsp;對(duì)話字符數(shù)限制&nbsp;關(guān)聯(lián)歷史對(duì)話限制&nbsp;</td>

// 給 <td> 元素加一個(gè) id
let tdElement = document.querySelector('#myTd');  // 通過(guò) ID 選擇 <td> 元素

// 獲取 <td> 中的文本內(nèi)容
let text = tdElement.innerHTML;

// 用正則匹配每個(gè)單詞，并用 <span> 包裹
let modifiedText = text.replace(/(\S+)/g, '<span>$1</span>');

// 將修改后的內(nèi)容重新賦值給 <td> 元素
tdElement.innerHTML = modifiedText;

三姐

9527 發(fā)表于 2024-12-20 11:35
因?yàn)榉诸愋畔⒆侄文J(rèn)是用&nbsp;分割的，所以CSS無(wú)法單選里面的字段，不過(guò)可以用JS正則匹配加以包裹每個(gè)字 ...

感謝大佬解答,我再研究研究

波多野結(jié)衣

三姐 發(fā)表于 2024-12-19 15:23
加過(guò)了沒(méi)用的

有的，我就是這么干的，主體有個(gè)類的，用這個(gè)類。直接定位到多選哪里。強(qiáng)制一下優(yōu)先級(jí)，最好定義一個(gè)類。就可以解決了，最簡(jiǎn)單的，別聽(tīng)他們說(shuō)的什么js，反而更復(fù)雜了，只要是樣式，就沒(méi)有一個(gè)css解決不了的。