Wenden Sie einen CSS-Effekt nur auf die ersten 10 <a> Tags eines div

Wie Sie einen CSS-Effekt auf die ersten 10 <a> Tags eines div anwenden?Wenden Sie einen CSS-Effekt nur auf die ersten 10 <a> Tags eines div

Das ist mein Ansatz, aber ich glaube, dass es eine bessere Lösung zu sein hat:

a:nth-child(1), a:nth-child(2), a:nth-child(3), a:nth-child(4), 
a:nth-child(5), a:nth-child(6), a:nth-child(7), a:nth-child(8), 
a:nth-child(9), a:nth-child(10){ color:#4faacb; }

Quelle

2013-04-29 sanchitkhanna26

Ich bin mir ziemlich sicher, dass es eine Auswahlmöglichkeit gibt. Ich bin mir nur nicht sicher, welche Art von Browserunterstützung es zu diesem Zeitpunkt gibt. –

Warum verwenden Sie nicht eine JS-Schleife, um eine Klasse auf die ersten 10 Links anzuwenden, und verwenden Sie diese Klasse dann als Selektor? – 11684

a: nth-child (-n + 11) {color: # 4faacb} –

ich das CSS den Trick tun sollten

a:nth-child(-n+10) { color: #4faacb }

JSFiddle

Hoffnung glauben, dass dies hilft

Quelle

2013-04-29 13:35:20

Großartig, es funktioniert..Awesome – sanchitkhanna26

@RayZ markieren Sie es als akzeptiert (kreuzen Sie neben der Nummer und Pfeile), damit andere Leute die Lösung finden können! – Barney

Ich werde sicherlich ... Einen Moment warten – sanchitkhanna26

Sie können dies mit einemerreichenFormel in Kombination mit not:

div > a:not(:nth-of-type(1n+11)){ 
    color: red; 
}

Demo here.

Quelle

2013-04-29 13:36:28 Barney

Entweder ': nth-of-type()' oder ': nth-child()' funktionieren, wenn jedes Kind des 'div' garantiert ein' a' ist. – BoltClock

@BoltClock yep. – Barney

Wenden Sie einen CSS-Effekt nur auf die ersten 10 <a> Tags eines div

Antwort

Verwandte Themen