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

Question

假设我有一个容器:

 <div id="container"> This is a red apple </div>

如何用红色为"红色"一词着色？像(伪代码)的东西

#container:[word="red"]{
   color:red;
}

是否可以在纯CSS中执行此操作而不引入JavaScript或修改现有HTML？

Answer 1

背景

这是一个Vanilla JavaScript解决方案,因为CSS无法实现.不是开玩笑,请阅读规范.您可以匹配元素,元素中属性的名称以及元素中命名属性的值.虽然我没有看到任何元素匹配的内容.

介绍

这是我的镜头.我确信有一种更时尚的方式,但这是它如何开始的要点.此外,由于你想要着色的颜色数量有限,所以使用if像我这样的一堆语句是很好的.

当然,更好的技术是通过构建颜色字典以编程方式更好地完成它,从而使代码组织起来.但这很有效,而且它是Vanilla JS.显然,我没有Regex的专业知识,所以我确信不需要几行.

特征

• 适用于多种颜色
• 适用于多种颜色可见

http://jsfiddle.net/TB62H/5/

var text = document.getElementById("content");
var str = text.innerHTML,
    reg = /red|blue|green|orange/ig; //g is to replace all occurances

//fixing a bit
var toStr = String(reg);
var color = (toStr.replace('\/g', '|')).substring(1);

//split it baby
var colors = color.split("|");

if (colors.indexOf("red") > -1) {
    str = str.replace(/red/g, '<span style="color:red;">red</span>');
}

if (colors.indexOf("blue") > -1) {
    str = str.replace(/blue/g, '<span style="color:blue;">blue</span>');
}

if (colors.indexOf("green") > -1) {
    str = str.replace(/green/g, '<span style="color:green;">green</span>');
}

if (colors.indexOf("orange") > -1) {
    str = str.replace(/orange/g, '<span style="color:orange;">orange</span>');
}


document.getElementById("updated").innerHTML = str;

结果

Answer 2

不能证明这一点,但要回答你的问题-这是在CSS中可能没有JS:实例

简而言之:我们为文本颜色设置黑色背景颜色,为特定红色字符串设置红色背景图像.我们删除原始文本填充使用-webkit-text-fill-color.使用背景剪切到文本轮廓-webkit-background-clip: text;,并将红色图像的大小和位置放在我们想要着色的任何文本字符串上.

请注意: 我绝不会建议在任何实时网站上使用此功能.这仅适用于webkit,因为它基于非标准的wekbit特定的CSS规则.并且颜色并没有真正绑定到彩色文本字符串 - 它完全是静态的.

编辑: 这是CSS:

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

Answer 3

遗憾的是,CSS现在没有任何选择器来实现您的需求.您必须使用JavaScript或Server Side Scripting来实现您的目标.