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）の指令を使用します。 Googleフォントのフォントを使用する場合は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>