Stil der n-ten Buchstaben in einer Spanne mit CSS

ich habe:Stil der n-ten Buchstaben in einer Spanne mit CSS

<span id="string">12h12m12s</span>

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

#string:nth-letter(3), 
#string:nth-letter(6), 
#string:nth-letter(9) { 
    font-size: 2em; 
}

Ich weiß, ich Javascript verwenden könnte die Zeichenfolge und ersetzen Sie den Brief mit dem umliegenden span Stil-Tags und die analysieren Stichworte. Die Zeichenfolge wird jedoch jede Sekunde aktualisiert und es scheint, dass das Parsen oft ressourcenintensiv ist.

Quelle

2013-04-14 n0pe

+12

Denn so etwas gibt es nicht. Sie haben es wahrscheinlich in einem Blog gelesen, in dem es auf seine Implementierung hinweist - siehe http://css-tricks.com/a-call-for-nth-everything/ und scrollen Sie nach unten zu ":: nth-letter()/:: last -letter()/:: nth-last-letter() "- und ja, das geht mit JS einfach. –

@ FabrícioMatté, hatte ich ein Gefühl ... Könnten Sie vorschlagen, eine andere Möglichkeit, dies zu tun (in js ich nehme an) das wäre effizient genug, um jede Sekunde ausgeführt werden? – n0pe

Vielleicht etwas wie das http://codepen.io/FWeinb/pen/djuIx –

Leistungsmäßig würde ich eine span Hölle empfehlen.

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

Eine Spanne für jede h, m und s Buchstaben, damit Sie sie richtig stylen kann (können entweder gleich oder verschieden Styling für jede Anwendung).

Und ein weiterer Bereich für jede Nummer, so dass Sie die Referenzen zwischenspeichern können. In der Summe ist hier eine JS für eine sehr einfache Uhr Lokalzeit:

//cache number container element references 
var h = document.getElementById('h'), 
    m = document.getElementById('m'), 
    s = document.getElementById('s'), 
    //IE feature detection 
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText'; 

function tick() { 
    var date = new Date(), 
     hours = date.getHours(), 
     mins = date.getMinutes(), 
     secs = date.getSeconds(); 
    h[textProp] = hours < 10 ? '0'+hours : hours; 
    m[textProp] = mins < 10 ? '0'+mins : mins; 
    s[textProp] = secs < 10 ? '0'+secs : secs; 
} 
tick(); 
setInterval(tick, 1000);

Fiddle

Dies zeigt die Grundidee der zwischengespeicherten Selektoren. Indem Sie die Elemente nicht neu erstellen, haben Sie auch einen guten Leistungsschub.

Obwohl einmal pro Sekunde ist nicht sehr schwer für etwas so einfach arbeiten (es sei denn, Sie haben Hunderte von Uhren in Ihrer Seite).

Quelle

2013-04-14 00:37:27

Das war die unterhaltsamste Einführung zu einer Antwort –

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 & s von der ursprünglichen Zeichenfolge.

string = $('#string').text(); 

hD = string.substr(0,2) 
h = "<span>"+string.substr(2,1)+"</span>"; 
mD = string.substr(3,2) 
m = "<span>"+string.substr(5,1)+"</span>"; 
sD = string.substr(6,2) 
s = "<span>"+string.substr(8,1)+"</span>"; 

finalString = hD + h + mD + m + sD + s; 

$('#string').html(finalString);

Dann können Sie die Spannweiten innerhalb #string mit CSS-Stil.

#string{font-size:1.2em} 
#string > span{font-size:0.8em}

Hier ist ein .

Quelle

2013-04-14 00:23:28 dev

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

jsFiddle

JavaScript:

var str = document.getElementById('string'), 
    chars = str.innerHTML.split(''); 

for (var i = 0; i < chars.length; i++) { 
    if (chars[i].match(/[hms]/)) { 
     chars[i] = "<span class='smaller'>" + chars[i] + "</span>"; 
    } 
} 
str.innerHTML = chars.join('');

HTML:

<body> 
    <span id="string">12h12m12s</span>   
</body>

CSS:

.smaller { 
    font-size: 10px; 
}

Quelle

2013-04-14 01:05:20 orb

Eigentlich können Sie die gesamte for-Schleife löschen und die letzte Zeile ersetzen mit: – Patanjali

str.innerHTML = str.innerHTML.replace (/ ([hms])/gi, ' $ 1 '); – Patanjali

Die CSS wird dann: * # string span {font-size: 10px} – Patanjali

Einfache Lösung mit CSS und jedes Zeichen mit einer Spannweite-Tag Verpackung:

#text span:nth-child(2) { 
    color: #ff00ff; 
} 

#text span:nth-child(5) { 
    color: #00ffff; 
} 

#text { 
    font-size: 20px; 
} 

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

Quelle

2016-10-21 08:36:23 Borbo

Stil der n-ten Buchstaben in einer Spanne mit CSS

Antwort

Verwandte Themen