Maison > interface Web > tutoriel CSS > Comment les sélecteurs CSS comme `a[href^='...']` ciblent-ils des éléments d'ancrage spécifiques ?

Comment les sélecteurs CSS comme `a[href^='...']` ciblent-ils des éléments d'ancrage spécifiques ?

Susan Sarandon
Libérer: 2024-11-24 01:48:10
original
1027 Les gens l'ont consulté

How do CSS Selectors like `a[href^=

Déchiffrer les sélecteurs CSS : comprendre un[href^="..."]

Les sélecteurs CSS offrent un contrôle précis sur les éléments HTML en spécifiant critères auxquels ils doivent répondre. L'un de ces sélecteurs est a[href^="..."], qui cible les éléments d'ancrage () en fonction de la présence d'une chaîne particulière au début de leurs valeurs d'attribut href.

Considérez le code CSS suivant :

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

Ce sélecteur correspond à tous les éléments d'ancrage dont les valeurs d'attribut href commencent par "http:". Par conséquent, tout lien dans votre document HTML avec un attribut href commençant par « http : » appliquera le style spécifié, comme une image d'arrière-plan.

Pour illustrer davantage, supposons que vous disposiez du code HTML suivant :

<a href="http://example.com">Example Website</a>
<a href="https://anothersite.net">Another Site</a>
Copier après la connexion

L'application du code CSS susmentionné n'affecterait que le premier lien, car son attribut href correspond aux critères du sélecteur ("href^="http:"). L'image d'arrière-plan ornerait ce lien, tandis que le deuxième lien ne serait pas affecté.

Voici un autre exemple :

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

Ce sélecteur cible les éléments d'ancrage avec des valeurs d'attribut href qui commencent par "http : //monsite.com" ou "http://www.monsite.com". Tout lien dans votre code HTML qui correspond à ces modèles verra son image d'arrière-plan supprimée et son remplissage droit mis à zéro.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal