通過css改變文本中數字數字的樣式

Question

我有一個文本（03天02夜套餐，從120美元開始）。無論如何，我可以只使用CSS來改變數字的風格。我知道我可以通過添加額外的html標籤或使用jquery來做到這一點。現在一直在尋找這一點，但找不到任何東西。任何幫助，將不勝感激。

Answer 1

如果您想在文本中提供的數字中添加類似的顏色，請嘗試使用此代碼。

<style> 
 
p span{ 
 
    color:red; 
 
} 
 

 
</style> 
 

 
<p><span>03</span> Days <span>02</span> Night Package, Starts from <span>$120</span></p>

，但如果你想添加不同的顏色，那麼你可以在你的文件中添加此CSS和HTML。

<style> 
 
    p span:nth-child(1){ 
 
     color:red; 
 
    } 
 
    p span:nth-child(2){ 
 
     color:green; 
 
    } 
 
    p span:nth-child(3){ 
 
     color:purple; 
 
    } 
 
    
 

 
    </style> 
 

 
    <p><span>03</span> Days <span>02</span> Night Package, Starts from <span>$120</span></p>

我希望它會爲你很有幫助。

Answer 2

使用純CSS不可能僅定位文本中的數字。

您唯一能做的只是change the font family的數字。

這使用unicode-range  （spec,   MDN）指令。當使用谷歌字體的字體時，它爲can be used as follows。我在這裏選擇了數字和美元符號，但可以在text參數中選擇任何字符範圍。

@import url('https://fonts.googleapis.com/css?family=Raleway&text=$'); 
 
@import url('https://fonts.googleapis.com/css?family=Ranga'); 
 

 
p { 
 
    font-family: 'Raleway', 'Ranga', sans-serif; 
 
}

<p>03 Days 02 Night Package, Starts from $120</p>

---

因爲你只提到在你的答案多餘的HTML標記和jQuery，我認爲這可能是有益的向你展示如何做到這一點香草的JavaScript。

let elementToFindDigitsIn = document.querySelector('p'); 
 
elementToFindDigitsIn.innerHTML = 
 
    elementToFindDigitsIn 
 
     .textContent 
 
     .replace(/(\$?\d+)/g, '<span>$1</span>');

span { 
 
    color: blue; 
 
}

<p>03 Days 02 Night Package, Starts from $120</p>

事實上，如@LGSon在評論中提到，它也可以以不同的號碼給不同的類很容易，這樣一來。

let elementToFindDigitsIn = document.querySelector('p'), 
 
    count = 0; 
 
elementToFindDigitsIn.innerHTML = 
 
    elementToFindDigitsIn 
 
     .textContent 
 
     .replace(/(\$?\d+)/g, (s) => { 
 
     let c = `num-${++count}`; 
 
     if (s[0] === '$') { 
 
      c += ' money'; 
 
     } 
 
     return `<span class="${c}">${s}</span>`; 
 
     });

span { 
 
    color: blue; 
 
} 
 

 
span.money { 
 
    color: red; 
 
} 
 

 
span.num-2 { 
 
    color: purple; 
 
}

<p>03 Days 02 Night Package, Starts from $120</p>