a[href^="http://"] {
/* fully valid URL, likely external link */
}
a[href="http://google.com"] {
/* link to specific website */
}
a[href^="/"], a[href^=".."] {
/* internal relative link */
}
a[href^="mailto:"] {
/* email link */
}
a[href$=".pdf"] {
/* PDF file */
}
a[href$=".doc"] {
/* Microsoft Word document */
}
a[href$=".mp3"] {
/* Music file */
}
a[href$=".zip"] {
/* Archive file */
}Links je nach Ziel gestalten
Chris Coyier am
Wow! Das ist wirklich nett! Ich bin sicher, ich habe es schon einmal gesehen, aber Sie haben es auf eine leicht verständliche Weise dargestellt!
Ich habe nur ein paar Fragen
1) Ich stelle mir vor, dass ^ "beginnt mit" bedeutet; bedeutet $ "endet mit" oder "enthält diesen Text irgendwo"?
2) Vollständige browserübergreifende Unterstützung? IE?
Danke!
$ bedeutet tatsächlich "endet mit" ("enthält diesen Text irgendwo" ist [attr*="textanywhere"])
IE7+ hat Unterstützung dafür
http://www.quirksmode.org/css/contents.html ("Erweiterte [attr]-Selektoren")
Das ist ziemlich praktisch. Ich benutze diese Methode schon seit fast zwei Jahren. Ich habe hier aber ein paar neue Dinge gesehen. Danke fürs Teilen!
Für den "Link zu einer bestimmten Website" würde die Deklaration von google.com alle Unterverzeichnisse von google.com abdecken (z. B. google.com/images, google.com/analytics usw.)? Oder müssten sie speziell deklariert werden?
Dies ist das erste Mal, dass ich auf diesen CSS-Trick stoße, und ich liebe ihn. Zuerst war ich etwas ratlos, da ich Links auf meiner Website stylen musste, die bestimmten Text in der URL hatten. Nur eine Menge Links zu Produkten, die ich ähnlich wie die Marke des Produkts stylen wollte. Dafür musste ich Links stylen, die zu beliebigen Produkten gingen, die den Markennamen in der URL enthielten.
Ich habe a[href*="/markenname"] und andere Variationen davon verwendet, um das zu erreichen, und ich bin begeistert.
Aus Neugierde, wie nennt man das? Dieser coole Trick in den Klammern?
Danke für diesen großartigen Beitrag!
Wie würde ich dies für relative Links verwenden, die eine eindeutige Benutzer-ID enthalten (Drupal), z. B.: /user/1/bookmarks
Hallo,
Vielen Dank für diese Optionen. Gibt es eine Möglichkeit, zu sagen
Wende diesen Stil an, wenn der href das Wort "archives" nicht enthält
Vielen Dank im Voraus
Shilpi
Das sollte möglich sein
Ich möchte ein
<hr>-Tag entfernen (mit display: none) basierend auf der URL, wenn die URL die Wörter quick_tab enthält?Wie kann das gemacht werden?
Ich habe bereits das Beispiel im neuesten Beitrag unten ausprobiert
funktioniert bei mir nicht.
Bitte helfen Sie!
Vielen Dank
Brian
Gibt es eine Möglichkeit, zu gruppieren, anstatt einzeln zu definieren, wie
a[href$=”.pdf”],a[href$=”.PDF”],a[href$=”.xls”],a[href$=”.xlsx”],a[href$=”.xlsm”],a[href$=”.doc”],a[href$=”.docx”]
Kann so etwas haben
a[href*=”.pdf|.PDF|.doc|.docx|.xls|.xlsx|.xlsm”]
Das ist großartig, danke! Gibt es eine Möglichkeit, einen "Catchall" für YouTube zu erstellen? Zum Beispiel habe ich zwei Links ohne Klassen (können nicht geändert werden), einer verlinkt zu einem PDF und der andere zu verschiedenen YouTube-Videos.
Ich muss also sagen, dass ich jeden YouTube-Video-URL anspreche, sie werden alle unterschiedlich sein und sich ändern, daher kann ich sie nicht fest codieren
Versuchen Sie
Das ist wirklich nett, aber ist es möglich, es auf # href anzuwenden? Ich habe es ohne Erfolg versucht
Ich habe ein wenig zum relativen Link hinzugefügt, damit er in meinem Fall funktioniert
a[href^="./"], a[href^="/"], a[href^=".."] {color: red;
}