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

Question

您好，有什么方法可以使用 css 在一行中制作不同颜色的第二个单词吗？

例如：

<h2>Change color by css</h2>

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

Answer 1

要实现此功能（遗憾的是，没有

:secondWord

伪选择器），您必须使用JavaScript，因此我将提供一个相对简单的建议，允许您定义一个类名以用作样式-钩：

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 演示.

更新了上述函数，以便允许提供特定的元素类型（如果未提供，则默认为

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 演示.

Answer 2

在 HTML 中：

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

然后是样式表中的 CSS：

/* Replace blue with the colour you want */
.color { color: blue; }

Answer 3

您必须设置元素的样式才能实现此目的，因此您必须添加

span

并设置其样式。或者如果这个特定的词在某种程度上被强调使用，那么可能是

em

或

strong

。

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

我在

span

元素中设置了所有

h2

的样式，但在现实世界中，您通常会向此范围添加一个类，并使用此类作为样式指令的选择器;)