Je ne trouve pas la différence entre ces deux sélecteurs. Les deux semblent faire la même chose que vous sélectionnez des balises basées sur une valeur d'attribut spécifique contenant une chaîne donnée.
pour pour [attribut ~ = valeur] : http: // www .w3schools.com / cssref / sél_attribute_value_contains.asp
[attribut * = valeur] : http: // www .w3schools.com / cssref / sél_attr_contain.asp
7 Réponses :
Par exemple:
Vérifiez ce lien: http://www.w3schools.com/cssref/csss_selectors.asp < / a> * = est pour la sous-chaîne
~ = est pour la recherche de mots
"Ce sont des mots de test"
attribut ~ = "est" <= sélectionné
attribut ~ = "est" <= non sélectionné (car "EST" n'existe pas comme mot)
w3schools est un notoirement peu fiable source, et non liée au W3C. Au lieu de cela, consultez le Standard CSS officiel :
[attribut ~ = valeur] correspond à n'importe quelle entrée dans une liste délimitée spatiale.
Il correspond à attribut = "une valeur B" , mais pas attribut = "une valeurb" . .
[attribut * = valeur] correspond à toute sous-chaîne.
Il correspond attribut = "une valeur B" et attribut = "une valeurb" , mais pas attribut = "x" . .
Je me suis toujours demandé pourquoi ils étaient toujours (2011!) Utilisation de ASP (au lieu d'ASP.NET ou de manière appropriée ASP.NET MVC).
@Basaratali W3schools utilise ASP.NET sur IIS 6. Le "Real" W3C utilise Smarty / PHP / Apache sur ses espaces de frontière, et surtout des pages Web statiques autrement. Le problème est le nom trompeur de W3schools, le contenu obsolète / incorrect et leur classement Google curieusement élevé.
de cette page :
e [foo ~ = "bar"] Un élément E dont la valeur d'attribut "FOO" est une liste des valeurs séparées par des espaces, dont l'une est exactement égale à "bar"
e [foo * = "bar"] un élément E dont la valeur d'attribut "FOO" contient la sous-chaîne "bar"
S'il vous plaît, n'utilisez pas de luthols w3s. C'est un mauvais site. Vous pouvez en trouver plus sur pourquoi c'est mauvais ici .
Vous pouvez trouver une bonne référence sur les sélecteurs CSS3 sur W3C:
e [foo ~ = "bar"] un élément E dont la valeur d'attribut "foo" est une liste de valeurs séparées par des espaces, dont l'une est exactement égale à "bar"
e [foo * = "bar"] un élément E dont la valeur d'attribut "FOO" contient le Substring "bar"
C'est pourquoi les gens autour d'ici découragent l'utilisation de W3schools.com en tant que site de référence. Les descriptions des deux sélecteurs sur leur site ne font vraiment pas facile de les distinguer.
Une meilleure ressource à utiliser serait la documentation officielle du W3C - il est assez clair sur la différence: http://www.w3.org/tr/Selectors/
e [foo ~ = "bar"] Un élément E dont la valeur d'attribut "FOO" est une liste des valeurs séparées par des espaces, dont l'une est exactement égale à "bar"
e [foo * = "bar"] un élément E dont la valeur d'attribut "FOO" contient la sous-chaîne "bar"
Fondamentalement, la différence est que
* = est une carte générique stupide; Il suffira de rechercher la chaîne correspondante, peu importe où il apparaît ou ce qui lui apparaît, alors que~ = est une carte générique de balise de mots; Il recherchera la valeur correspondante à condition que c'est un mot distinct dans l'attribut. Le mot correspondant doit être entouré des deux côtés par l'espace blanc ou le début / la fin de la chaîne.
du Documentation de sélecteur JQuery :
attribut contient le sélecteur [nom * = "valeur"] Sélectionne des éléments qui ont l'attribut spécifié avec une valeur contenant la sous-chaîne donnée.
attribut contient le sélecteur de mots [nom ~ = "valeur"] Sélectionne des éléments qui ont l'attribut spécifié avec une valeur contenant un mot donné, délimité par des espaces.
En d'autres termes, en utilisant ~ = = nécessite une "valeur" pour être mot / jeton, de sorte que "ASDFWord" ne serait donc pas sélectionné, où "Word ASDF" serait ". En utilisant * = il suffit de rechercher une sous-chaîne afin que "ASDFWord" et "Word ASDF" soit sélectionné.
Selon Spécifications :
Donc, la principale différence est que Vous pouvez le voir en action ici: http://jsfiddle.net/kizu/bpx9n/
La [classe * = val] est appliquée aux deux divs, mais la [Classe ~ = val] est appliquée sur celle où le [att ~ = val] : représente un élément avec l'attribut ATT dont la valeur est une liste de mots séparés par des espaces, dont l'une est exactement "Val". Si "Val" contient des espaces blanche, il ne représentera jamais rien (car les mots sont séparés par des espaces). Aussi si "val" est la chaîne vide, elle ne représentera jamais rien.
[att * = val] : représente un élément avec l'attribut ATT dont la valeur contient au moins une instance de la sous-chaîne "Val". Si "VAL" est la chaîne vide, le sélecteur ne représente rien.
* signifie que le val peut être n'importe où dans la valeur de l'attribut, mais en cas de ~ Le Val doit-moi me faire une partie exacte de la valeur pouvant être séparée par des espaces blancs (comme class ).
Val est séparé par des espaces blanchisseurs des autres parties d'un attribut .