用於更改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 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

爲了實現這一點，您必須設計一個元素的樣式，所以您必須添加一個span並對其進行設計。或者，如果這個特定的詞語在某種程度上被強調使用，可能是em或strong。

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

我的風格都span在h2元素，但在現實世界中，你通常會添加一個類此跨度和使用這個類作爲一個選擇你的造型指導;）

Answer 3

在HTML

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

然後在樣式表中的CSS

.color {color: blue;} 

代替藍色與要