更改顏色css只有前6個字符的文本

我有短語Client Testimonial，我只想改變Client我只使用first-letter，但有沒有在CSS中的任何方法來改變顏色..沒有javascript請。更改顏色css只有前6個字符的文本

2012-08-31 Rafee

沒有：CSS中的第一個單詞僞元素，所以這是不可能的（沒有，像你不想要的，JavaScript）。請參閱http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word以供參考。 –

如果您改變主意使用js：http://www.dynamicsitesolutions.com/javascript/first-word-selector/ –

謝謝！，那麼我需要使用javascript。 – Rafee

如何使用:before？

我將文本從「客戶見證」到「推薦」的變化，然後用CSS應用:before規則：

HTML：

<div class="word">Testimonial</div>

CSS：

.word { 
color: black;  
} 
.word:before { 
color: red; 
content: "Client "; 
}

例如：http://jsfiddle.net/LvZt7/

來源

2012-08-31 15:49:19 jackJoe

哇！謝謝！和簡單的代碼。真的節省了時間和工作。 – Rafee

雖然這在頁面可視化的方式上是可行的，但對於可訪問性來說卻是可怕的。大多數屏幕閱讀器跳過CSS生成的內容（http：// cssgallery。方式/測試最輔助功能的最CSS生成的內容/）。此外，這違反了將內容/結構與格式分離的概念。 –

你可以將這個詞包裝在span中，並改爲設置它。正如Henrik Ammer在評論中所述，沒有:first-word。

來源

2012-08-31 15:35:23

<p><span style="color: #c0ff33;">Client</span> Testimonial</p>

所以是的，只是<span></span>它非常適合種情況樣式。

編輯：

此編輯不是針對這個職位筆者但對於某人來說只是學習使用CSS：基於一個應該考慮使用單獨的.css文件中的方式設置樣式的「最佳做法」像：

.client { 
    color: #c0ff33; 
}

，並用它喜歡：

<p><span class="client">Client</span> Testimonial</p>

如果要指定更多的並且證書艾因那你只用span風格里面<p></p>你也可以將其引入像：

p span.client { 
    color: #c0ff33; 
}

小提琴：http://jsfiddle.net/LvZt7/97/

你也可以做它周圍指定的p系列的其他方式，而不是跨越：

<p class="client"><span>Client</span> Testimonial</p>

和

p.client span { 
    color: #c0ff33; 
}

或只是指定所有的p跨度的HTML標記，以有內部跨度的文字顏色#c0ff33：

<p><span>Client</span> Testimonial</p>

和

p span { 
    color: #c0ff33; 
}

來源

2012-08-31 15:37:59

我無法在其中添加任何html元素..值來自CMS即Drupal – Rafee

然後JavaScript是唯一的方法。 –

是的，它沒有在主題中說過，希望這會對其他人來說很方便:) –

正如其他人所指出的，有（不幸的是*）沒有:first-word僞選擇可用在CSS中（甚至是我目前所知的3或4版本）。然而，沒有JavaScript，存在兩種可能性，儘管兩者都有其缺陷。

第一，和最簡單的，是簡單地包裹在跨第一個字：

<p><span>Client</span> Testimonial</p>

和風格與亮點跨度：

p span { 
    color: #f90; 
}

JS Fiddle demo。

雖然這種方法確實需要增加一個額外的，在這種情況下，span元素爲了造型的目的，它很容易實現，並可靠地跨瀏覽器工作。

第二個是稍微脆弱，但避免添加多餘的span標籤，但需要，相反，你添加一個屬性：

<p data-highlightword="Client">Client Testimonial</p>

用下面的CSS：

p[data-highlightword] { 
    position: relative; 
} 

p[data-highlightword]::before { 
    content: attr(data-highlightword); 
    color: #f90; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

JS Fiddle demo 。

此方法依賴於向單個元素添加單個屬性，但確實需要額外的CSS並且只能在兼容的瀏覽器中使用。現在，幾乎所有這些都只有IE 8或者9甚至更低，這證明存在問題。

來源

2012-08-31 15:48:20

使用data-hihglightword或之前的瀏覽器支持問題呢？爲：在我發現至少這個http://css-tricks.com/browser-support-pseudo-elements/恕我直言，我會使用基本的「東西」更容易的解決方案，最有可能與更多的舊版瀏覽器工作:)但即使對我來說，你也會分享一些有趣的風格。 –

瀏覽器支持問題是答案中最後一段的確切原因。也許我沒有充分提出這個問題，但說實話，隨着時間的推移，我越來越厭倦了支持IE的需要。我*會*支持IE，並且很高興，但是我已經對它的（以前）在標準方面的自滿的事實變得有些沾沾自喜了。另一方面，現在IE 10真的讓我興奮...... –

好的，thnx的解釋 - 並且很少有開發人員因IE而興奮:) –

我建議你做這樣的事情：

<span class = "redcolor">Client </span> Testimonial

CSS：

.redcolor 
{ 
    color: red 
}

如果你想在紅什麼這樣的話，只要給它一個DIV/SPAN與該類

來源

2012-08-31 15:51:44 tehdoommarine

更改顏色css只有前6個字符的文本

回答

相關問題