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

三姐

登錄/注冊(cè)后可看大圖

分類信息 每個(gè)選擇字段上的背景顏色
我只能寫成一長條

登錄/注冊(cè)后可看大圖

這個(gè)是不是需要js配合?

1 貢獻(xiàn)

最佳答案

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

// 給 <td> 元素加一個(gè) id
let tdElement = document.querySelector('#myTd');  // 通過 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:38
• 詳細(xì)答案 >

海哥

我記得好像有個(gè)插件可以實(shí)現(xiàn)

天外飄仙

一張截圖 全靠猜呀

波多野結(jié)衣

目標(biāo)是多選，你的是一個(gè)文本，肯定不一樣

三姐

波多野結(jié)衣 發(fā)表于 2024-12-19 14:28
目標(biāo)是多選，你的是一個(gè)文本，肯定不一樣

我也是多選

波多野結(jié)衣

三姐 發(fā)表于 2024-12-19 14:54
我也是多選

加個(gè)間距嘛，這不是簡單的很

ysx24

你的第一個(gè)圖是技能趴的分類信息多功能商城，是分類信息和插件結(jié)合的效果
第二個(gè)不清楚
要修改模板代碼了

三姐

波多野結(jié)衣 發(fā)表于 2024-12-19 15:14
加個(gè)間距嘛，這不是簡單的很

加過了沒用的

三姐

ysx24 發(fā)表于 2024-12-19 15:19
你的第一個(gè)圖是技能趴的分類信息多功能商城，是分類信息和插件結(jié)合的效果
第二個(gè)不清楚
要修改模板代碼了 ...

第一個(gè)是別的網(wǎng)站上看到的,我去應(yīng)用商城找找看,我搜過自己改好像要和js結(jié)合也能實(shí)現(xiàn),就是不知道怎么搞.
第二個(gè)是我自己寫的.

ysx24

三姐 發(fā)表于 2024-12-19 15:24
第一個(gè)是別的網(wǎng)站上看到的,我去應(yīng)用商城找找看,我搜過自己改好像要和js結(jié)合也能實(shí)現(xiàn),就是不知道怎么搞.
...

說的這個(gè)吧，不用找了，早就下架了

登錄/注冊(cè)后可看大圖