Der Effekt, den wir erreichen möchten, besteht darin, allen Links, die auf eine andere Website verweisen, ein kleines Symbol hinzuzufügen, um den Benutzern mitzuteilen, dass sie durch Klicken auf diesen Link diese Website verlassen. Dies ist ein externer Link. Natürlich kann dies durch komplexeres JavaScript erreicht werden, aber wir können diese Funktion jetzt durch CSS 3-Attributselektoren erreichen.
a[href^=“http:“] {
Hintergrund:url(images/externalLink.gif) no-repeat rechts oben;
padding-right:10px;
}
Die Bedeutung des obigen Codes ist: Alle Links, die mit http: beginnen, werden mit einem kleinen Pfeilsymbol hinzugefügt, um den Benutzer daran zu erinnern, dass es sich um einen externen Link handelt, und der Benutzer verlässt die Website, wenn er darauf klickt. Man kann sagen, dass diese Funktion sehr benutzerfreundlich ist und die Benutzerfreundlichkeit von Webdesign unterstreicht.
Dies liegt natürlich daran, dass alle Links, die auf diese Website verweisen, relative Adressen verwenden. Was passiert, wenn der Link zu dieser Website ebenfalls mit http: beginnt oder sowohl absolute als auch relative Adressen verwendet? Wir können den folgenden Code verwenden:
a[href^=“http:“] {
Hintergrund:url(images/externalLink.gif) no-repeat rechts oben;
padding-right:10px;
}
a [href*=“www.dudo.org“] {
Hintergrund: keiner;
Polsterung:0;
}
Die beiden oben genannten Regeln lauten: Alle Adressen, die mit http: beginnen, werden mit dem externen Linksymbol hinzugefügt, und diejenigen, die mit http://www.dudo.org/ beginnen, werden nicht mit http beginnen Das Pfeilsymbol wird nicht angezeigt.
Artikelquelle: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm