CSS et appliquer le style pour tous les contrôles avec ID spécifique

Question

disons que j'ai quelques entrées avec ID comme ça:

ctl139_ctl00_txtValue 
ctl140_ctl00_txtValue 
ctl141_ctl00_txtValue 
..... 
xxxxxx_ctl00_txtValue 

comment, en utilisant CSS, appliquez le même style pour ces entrées (où ID suit le modèle : xxxx_ctl00_txtValue)

J'ai essayé CSS3 Minkiele suggessted mais je l'ai fait ce qui suit:

[id*="_ctl00_txtValue"]{ /* RULES */ } 

alors il devrait appliquer le style pour tous les éléments où id contient ma chaîne. Cela fonctionne dans Chrome mais pas dans IE8 mais msdn dit que cela devrait fonctionner. Pourquoi ça ne marche pas?

Answer 1

Vous pouvez utiliser css3 sélecteur extrémités dans: $=, mais je ne sais pas combien de navigateurs implémenter cette fonctionnalité.

input[id$="_ctl00_txtValue"]{ 
    /* RULES */ 
} 

Si vous pouvez modifier le balisage d'entrée, je suggère d'ajouter une classe à ces éléments, qui pour but le style est plus simple.

CSS3 Selectors

Mise à jour

Quirksmode a une page de test pour ce type de sélecteurs. Il semble que les seuls navigateurs ne supportant pas cette fonctionnalité sont (surprise surprise) IE 5.5 et 6

Answer 2

Le fait que vous n'ayez aucun contrôle sur le HTML généré le rend difficile.

Si vous ne l'avez pas adversed à jQuery et une légère surcharge DOM, cela fonctionnera:

obtenir une prise du conteneur pour tous les articles, disons que leur dans un div. Gardez ce sélecteur aussi serré que possible, car plus il est "desserré", plus il y a d'éléments à traiter et donc plus de frais généraux.

var pattern = '_ctl00_txtValue'; 
$('#somecontainer input').each(function() { 
    if ($(this).attr("id").indexOf(pattern) > 0) { 
     // Apply CSS using jQuery, e.g: 
     $(this).css("color","red"); 
    } 
}); 

Fondamentalement, nous parcourons les éléments DOM dans un conteneur donné, vérifier si l'ID contient le modèle que vous voulez, alors si oui, appliquez votre CSS.

Cela devrait fonctionner, mais comme je l'ai dit, il y a un surcoût de traversée de DOM en fonction de la structure de votre HTML.