Question

你好，我有什么办法可以用css在一行中用不同颜色制作第二个单词？

代表：

<h2>Change color by css</h2>

这里我想改变“颜色”会有不同的颜色。

Answer 1

为了实现这一点（遗憾的是没有:secondWord伪选择器）你有使用JavaScript，所以我将提供一个相对简单的建议，允许你定义一个class-name用作样式钩子：

Object.prototype.styleSecondWord = function(styleHook){
    styleHook = styleHook || 'secondWord';
    var text = '',
        words = [];
    for (var i = 0, len = this.length; i<len; i++){
        words = (this[i].textContent || this[i].innerText).split(/\s+/);
        if (words[1]) {
            words[1] = '<span class="' + styleHook + '">' + words[1] + '</span>';
            this[i].innerHTML = words.join(' ');
        }
    }
};

document.getElementsByTagName('h2').styleSecondWord('classNameToUse');

JS Fiddle demo

上面的函数已更新，以便允许提供特定的元素类型（如果没有提供，则默认为span）：

Object.prototype.styleSecondWord = function (styleHook, styleElem) {
    styleHook = styleHook || 'secondWord';
    styleElem = styleElem || 'span';
    var open = '<' + styleElem + ' class="' + styleHook + '">',
        close = '</' + styleElem + '>',
        text = '',
        words = [];
    for (var i = 0, len = this.length; i < len; i++) {
        words = (this[i].textContent || this[i].innerText).split(/\s+/);
        if (words[1]) {
            words[1] = open + words[1] + close;
            this[i].innerHTML = words.join(' ');
        }
    }
};

document.getElementsByTagName('h2').styleSecondWord('classNameToUse', 'em');

JS Fiddle demo

Answer 2

在HTML

中

<h2>Change <span class ="color">color</span> by css</h2>

然后是样式表中的CSS

.color {color: blue;}

用您想要的颜色替换蓝色

Answer 3

你要设计一个元素来实现它，所以你必须添加一个span并设置它的样式。或者，如果使用此特定字词，可能需要em或strong。

小提琴：http://jsfiddle.net/zrsaW/

我在span元素中设置了所有h2样式，但在现实世界中，您通常会在此范围中添加一个类，并使用此类作为样式说明的选择器;）

用于改变h2中第二个单词颜色的CSS

3 个答案: