Comment le sélecteur d'attribut CSS `a[href^="..."]` cible-t-il des éléments d'ancrage spécifiques ?

Sélecteurs d'attributs CSS : comprendre le rôle d'un[href^="..."]

Dans le domaine du développement Web, CSS joue un rôle crucial dans le style des pages Web. Les sélecteurs d'attributs sont un outil puissant au sein de CSS qui permet aux développeurs de cibler des éléments spécifiques en fonction de leurs attributs. L'un de ces sélecteurs d'attributs est a[href^="...".

Considérez le code CSS suivant :

a[href^="http:"] {
  background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
  background-image: none; padding-right: 0;
}

Comprendre a[href^=".. ."]

Le sélecteur a[href^="..."] cible toutes les ancres éléments dont la valeur de l'attribut href commence par la chaîne spécifiée entre guillemets. Dans ce cas, il cible éléments avec des valeurs href qui commencent par "http:".

Exemple d'utilisation

Par exemple, disons que vous avez le code HTML suivant :

<a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">Google</a>
<a href="https://www.php.cn/link/9d70ada63ee39c2f16e678bbf698df46">YouTube</a>
<a href="/about-us">About Us</a>

L'application du code CSS ci-dessus à ce HTML stylisera les deux premiers liens ( et ) avec un fond vert et une image en haut à droite. Le troisième lien ne sera pas affecté.

Notes supplémentaires

Le caractère ^ dans le sélecteur indique le début de la valeur. Les autres opérateurs pouvant être utilisés dans les sélecteurs d'attributs incluent :

• $= : se termine par
• *= : contient
• |= : correspondance exacte (fonctionne uniquement avec classe et identifiant attributs)

Conclusion

En comprenant le rôle de a[href^="..."] dans CSS, vous pouvez efficacement cibler et styliser des éléments spécifiques ancrer les éléments en fonction de leur attribut href. Cette flexibilité améliore le contrôle et la précision de la conception de vos pages Web.

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!