Formatiere den n-ten Buchstaben in einem Bereich mit CSS

8

Ich habe:

%Vor%

und ich versuche, h , m und s kleiner als den Rest des Textes zu machen. Ich habe von dem Pseudo-Element nth-letter in CSS gehört, aber es scheint nicht zu funktionieren:

%Vor%

Ich weiß, dass ich JavaScript verwenden könnte, um die Zeichenfolge zu analysieren und den Buchstaben durch die umgebenden span -Tags zu ersetzen und die Tags zu formatieren. Die Zeichenfolge wird jedoch jede Sekunde aktualisiert, und es scheint, dass das Parsen oft ressourcenintensiv ist.

    
n0pe 14.04.2013, 00:04
quelle

4 Antworten

7

Im Hinblick auf die Leistung würde ich eine span Hölle empfehlen.

%Vor%

Eine Spanne für jedes h , m und s Zeichen, damit Sie sie richtig formatieren können (kann für jedes das gleiche oder ein anderes Styling anwenden).

Und ein weiterer Bereich für jede Nummer, damit Sie die Referenzen zwischenspeichern können. Zusammengefasst, hier ist ein JS für eine sehr simple lokale Zeituhr:

%Vor%

Geige

Dies veranschaulicht die Grundidee von Cache-Selektoren. Indem Sie die Elemente nicht neu erstellen, haben Sie auch einen guten Leistungsschub.

Obwohl eine Sekunde nicht sehr schwer ist, arbeiten Sie für etwas so Einfaches (außer Sie haben Hunderte von Uhren auf Ihrer Seite).

    
Fabrício Matté 14.04.2013, 00:37
quelle
3

Dies könnte eine langatmige Art sein, dies mit Javascript und jQuery zu tun, aber hier ist eine mögliche Lösung.

Trennen Sie die h , m & amp; s aus der ursprünglichen Zeichenfolge.

%Vor%

Dann können Sie die Spannen innerhalb von #string mit CSS gestalten.

%Vor%

Hier ist eine Demo-Geige, die das obige zeigt .

    
dev 14.04.2013 00:23
quelle
3

Dies wirft nur die Buchstaben in Spannen und gibt ihnen die gleiche Klasse. Vielleicht eine ehrenwerte Erwähnung wert lol: -)

jsFiddle

JavaScript:

%Vor%

HTML:

%Vor%

CSS:

%Vor%     
orb 14.04.2013 01:05
quelle
0

Einfache Lösung mit CSS und Umschließen jedes Zeichens mit einem span-tag:

%Vor%

Ссылка

    
Borbo 21.10.2016 08:36
quelle