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

问题描述 投票:0回答:3

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

例如:

<h2>Change color by css</h2>

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

html css
3个回答
5
投票

要实现此功能(遗憾的是,没有

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


3
投票

在 HTML 中:

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

然后是样式表中的 CSS:

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

0
投票

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

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

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

我在

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

© www.soinside.com 2019 - 2024. All rights reserved.