html - 在 HTML 中混合文本颜色

Question

使用 HTML，有没有办法根据每个文本选择所在的标签来混合文本颜色？此伪代码描述了我尝试创建的文本颜色混合类型：

<red>
    This text should be red.
    <blue>
        This text should be purple, since it is inside red and blue tags.
    </blue>
    This text should be red.
    <white>
        This text should be pink, since it is inside white and red tags.
    </white>
</red>

是否可以将此伪代码转换为有效的 HTML，以便以这种方式组合文本颜色？

Answer 1

动态地，不是没有脚本。但是，您可以定义一些 CSS 规则。

.red {
    color: red;
}
    .red .white,
    .white .red {
        color: pink;
    }
    .red .blue,
    .blue .red {
        color: purple;
    }
.blue {
    color: blue;
}
    .blue .white 
    .white .blue {
        color: light-blue;
    }

等等

这可以根据您的需要简单或复杂。

编辑：这是用于演示目的的 jsfiddle：http: //jsfiddle.net/LhSk2/

Answer 2

如果你不必支持 IE8 及以下，你可以使用半透明的 RGBA 颜色：

<div style="background: red">
    This text should be red.
    <div style="background: rgba(128, 0, 128, .5)">
        This text should be purple, since it is inside red and blue tags.
    </div>
    This text should be red.
    <div style="background: rgba(255, 255, 255, .5)">
        This text should be pink, since it is inside white and red tags.
    </div>
</div>

这是小提琴：http: //jsfiddle.net/zT8JD/