Цвет слов заканчивающийся на цифру?

Question

Я работаю над приложением, которое может помочь изучающим китайский язык запомнить слова.Мне любопытно, если возможно реализовать Pinyin слогелла подсветки в чистом CSS.Например, учитывая текст «ma3 shang2», я бы хотел, чтобы «ma3» стал желтым, потому что он оканчивается на «3», а «shang» - синим, потому что он оканчивается на «2».Все слова, заканчивающиеся на «1», должны быть зелеными, а все слова, заканчивающиеся на «4» - красными.Имеется ли CSS для решения этой проблемы?

Answer 1

Я думаю, что с помощью CSS практически невозможно достичь того, что вам нужно. Самое близкое, что вы можете получить - через селектор атрибутов. Но это потребует добавления атрибута в вашу HTML-разметку.

jQuery имеет селектор :contains, который может достичь желаемого.

$(document).ready(function(){
  $("div:contains(1)").css("color", "green");
  $("div:contains(2)").css("color", "blue");
  $("div:contains(3)").css("color", "yellow");
  $("div:contains(4)").css("color", "red");
});

[data*='1']{
  color: green;
}

[data*='2']{
  color: blue;
}

[data*='3']{
  color: yellow;
}

[data*='4']{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS way -->
<div data='hao1'>hao1</div>
<div data='hao2'>hao2</div>
<div data='hao3'>hao3</div>
<div data='hao4'>hao4</div>
<br>

<!-- jQuery way -->
<div>hao1</div>
<div>hao2</div>
<div>hao3</div>
<div>hao4</div>