Pourquoi `h3:nth-child(1):contains(\'a\')` ne sélectionne-t-il pas le premier \'a\' contenant ?

Pourquoi h3:nth-child(1):contains('a') échoue-t-il ?

Dans une tentative de sélection du premier h3 qui contient le texte « a », le sélecteur h3:nth-child(1):contains('a') est utilisé. Cependant, ce sélecteur ne donne pas le résultat souhaité.

Explication :

Le sélecteur CSS3 :contains() n'a jamais été implémenté en standard et n'est donc pas pris en charge dans principaux navigateurs. Ce sélecteur était destiné à faire correspondre les éléments contenant un texte spécifique, mais sa mise en œuvre aurait également entraîné des problèmes de performances en raison de la correspondance avec tous les ancêtres de l'élément.

Solutions alternatives :

Puisque :contains() n'est pas disponible, une approche alternative est requise :

• Modifier le HTML : Réorganisez la structure HTML pour placer l'élément h3 souhaité dans un emplacement distinct.
• Utilisez jQuery : jQuery fournit son propre sélecteur :contains(), qui peut être utilisé comme suit :

$("h3:first").filter(function() {
  return $(this).text().indexOf("a") >= 0;
});

Considérations :

• Pour jQuery et Selenium RC, :contains() est pris en charge mais peut conduire à des sélections inattendues en raison aux ancêtres correspondants.
• Le sélecteur CSS2 h3:first-child peut être utilisé à la place de h3:nth-child(1) pour une meilleure prise en charge du navigateur.

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!