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

我正在开发一个可以帮助汉语学习者记住单词发音的应用程序。我很好奇是否有可能在纯CSS中实现Pinyin syllabel荧光笔。例如，给定文本“ ma3 shang2”，我希望“ ma3”变为黄色，因为它以“ 3”结尾，而“ shang”为蓝色，因为它以“ 2”结尾。所有以“ 1”结尾的单词应为绿色，而所有以“ 4”结尾的单词应为红色。 CSS是否可以解决此问题？

最佳答案

我认为通过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>

关于css - 颜色以数字结尾的单词？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56571390/