通过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>