Farbe ändern css nur die ersten 6 Zeichen des Textes

8

Ich habe Phrase als Client Testimonial und ich will nur die Client ändern ich habe nur first-letter benutzt aber gibt es irgendeine Methode in CSS, um Farbe zu ändern .. kein Javascript bitte.

    
Rafee 31.08.2012, 15:31
quelle

5 Antworten

12

Wie wäre es mit :before ?

Ich würde den Text von "Client Testimonial" zu "Testimonial" ändern und dann mit CSS die :before -Regel anwenden:

HTML:

%Vor%

CSS:

%Vor%

Beispiel: Ссылка

    
jackJoe 31.08.2012, 15:49
quelle
6

Wie von anderen bemerkt, gibt es (leider *) keinen :first-word Pseudo-Selektor in CSS (gerade Version 3 oder 4, soweit ich derzeit weiß). Es gibt jedoch zwei Möglichkeiten, die ohne JavaScript existieren, obwohl beide Fehler haben.

Das erste und einfachste ist, einfach das erste Wort in einen Bereich einzubinden:

%Vor%

Und style die Spanne mit dem Highlight:

%Vor%

JS Fiddle-Demo .

Dieser Ansatz erfordert zwar ein zusätzliches Element, in diesem Fall das Element span für Styling-Zwecke. Es ist jedoch einfach zu implementieren und funktioniert zuverlässig über den Browser.

Die zweite ist etwas fragiler, vermeidet jedoch das Hinzufügen des fremden span -Tags, erfordert aber stattdessen, dass Sie ein Attribut hinzufügen:

%Vor%

Mit dem folgenden CSS:

%Vor%

JS Fiddle-Demo .

Dieser Ansatz basiert auf dem Hinzufügen eines einzelnen Attributs zu einem einzelnen Element, erfordert jedoch zusätzliches CSS und funktioniert nur in kompatiblen Browsern. Was ist fast alles von ihnen, jetzt, mit nur IE 8, oder vielleicht 9, und unten erweist sich als problematisch.

    
David Thomas 31.08.2012 15:48
quelle
3
%Vor%

also ja, style es einfach mit <span></span> es ist perfekt für diese Art von Situationen.

Bearbeiten:

Diese Editierung ist nicht für den Postautor gedacht, sondern für jemanden, der gerade erst css gelernt hat: basierend auf "best practices" sollte man eine separate .css-Datei zum Setzen von Styles wie folgt verwenden:

%Vor%

und benutze es wie:

%Vor%

Wenn Sie mehr angeben und sicher sein möchten, dass Sie nur Ihren span Stil in <p></p> verwenden, können Sie ihn auch wie folgt einführen:

%Vor%

Geige: Ссылка

Sie können es auch anders herum tun, indem Sie Ihre p-Klasse angeben und nicht überspannen:

%Vor%

und

%Vor%

oder einfach nur alle p span html-Markierungen angeben, damit der Text innerhalb der Spanne mit der Farbe #c0ff33 :

erscheint %Vor%

und

%Vor%     
Mauno Vähä 31.08.2012 15:37
quelle
0

Sie könnten das Wort in ein span umbrechen und es stattdessen formatieren. Wie Henrik Ammer in einem Kommentar sagte, gibt es kein :first-word .

    
Corey Ogburn 31.08.2012 15:35
quelle
0

Ich würde empfehlen, so etwas zu tun:

%Vor%

CSS:

%Vor%

Auf diese Weise, wenn Sie etwas in rot wollen, geben Sie ihm ein div / span mit dieser Klasse

    
tehdoommarine 31.08.2012 15:51
quelle

Tags und Links