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

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

954 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!