如何使用 CSS 为容器中的特定单词着色

问题
假设我有一个容器：

<div id=“容器”>这是一个红苹果</div>

如何给“红色”这个词上色？用红色？

类似（伪代码）

1. #container:[word="red"]{
   
2.    color:red;
   
3. }

复制代码

是否可以在不引入 JavaScript 或修改现有 HTML 的情况下在纯 CSS 中做到这一点？

回答
不是为了证明一点，而是为了回答你的问题——这在没有 JS 的 CSS 中是可能的：示例

简而言之：我们为文本颜色设置黑色背景颜色，为特定的红色字符串设置红色背景图像。我们使用 -webkit-text-fill-color 来移除原始文本填充。使用-webkit-background-clip：文本；将背景剪辑到文本轮廓，并调整红色图像的大小并将其放置在我们想要着色的任何文本字符串上。

警告：

我永远不会建议在任何网站上使用它。这仅适用于 webkit，因为它基于非标准的 wekbit-specific CSS 规则。颜色并没有真正绑定到彩色文本字符串 - 它完全是静态的。

编辑：

这是CSS：

1. #container {
   
2.     -webkit-text-fill-color: transparent;
   
3.     -webkit-background-clip: text;
   
4.     background-size: 1.5em 1em;
   
5.     background-repeat: no-repeat;
   
6.     background-position: 3.4em 0;
   
7.     background-color: #000;
   
8.     background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
   
9. }

复制代码