Wie gestalte ich Links, die mit einem bestimmten Präfix beginnen, mithilfe von CSS-Attributselektoren?

Grundlegendes zum CSS-Attributselektor: a[href^="..."]

In CSS können Sie Attributselektoren zum Stylen verwenden Elemente basierend auf den Werten ihrer Attribute. Ein spezifischer Attributselektor ist a[href^="..."]. Lassen Sie uns seine Komponenten aufschlüsseln:

• a: Dadurch werden alle Elemente mit dem Tag (Anker-Tags).
• href: Dies gibt das href-Attribut an, das die Ziel-URL für durch Anker-Tags erstellte Links enthält.
• ^=: Dies ist der Attributwertoperator „beginnt mit“. ."
• "http:": Dies ist der Wert, mit dem das href-Attribut beginnen sollte.

Wie funktioniert das? Es funktioniert?

Der a[href^="http:"]-Selektor stimmt mit allen Ankertags überein, deren href-Attributwert mit „http:“ beginnt. Dazu gehören in der Regel die meisten externen Links, die auf Websites im Internet verweisen.

Bedenken Sie beispielsweise das folgende CSS:

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

Diese CSS-Regel wendet ein bestimmtes Hintergrundbild und eine bestimmte Position auf alle Links an Beginnen Sie mit „http:“.

Erweiterte Verwendung:

Sie können auch mehrere Attributselektoren mit verwenden das gleiche Attribut, wie in dem von Ihnen bereitgestellten Beispiel gezeigt:

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

Diese Regel zielt auf alle Links ab, die mit „http://mysite.com“ oder „http://www.mysite.com“ beginnen und entfernt ihr Hintergrundbild und setzt ihre Polsterung auf Null. Dadurch können Sie das Erscheinungsbild externer Links auf Ihrer eigenen Website anpassen, während andere externe Links davon unberührt bleiben.

Das obige ist der detaillierte Inhalt vonWie gestalte ich Links, die mit einem bestimmten Präfix beginnen, mithilfe von CSS-Attributselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!