css - 以数字结尾的颜色词？

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>