Difference between [attribute~=value] and [attribute*=value]_问答_开发者

I cannot find the difference between these two selectors. Both seem to do the same thing i.e select tags based on a specific attribute value containing a given string.

For [attribute~=value] : http://www.w3schools.com/cssref/sel_attribut开发者_开发百科e_value_contains.asp

For [attribute*=value] : http://www.w3schools.com/cssref/sel_attr_contain.asp

w3schools is a notoriously unreliable source, and not related to the W3C. Instead, consult the official CSS standard:

[attribute~=value] matches any entry in a space-delimited list.
It matches attribute="a value b", but not attribute="a valueb".

[attribute*=value] matches any substring.
It matches attribute="a value b" and attribute="a valueb", but not attribute="x".

According to Specs:

[att~=val]: Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

[att*=val]: Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

So, the main difference is that * means that the val may be anywhere in the value of attribute, but in case of ~ the val must me exact part of value which can be separated by whitespaces (like class attribute).

You can see it in action here: http://jsfiddle.net/kizu/bPX9n/

the [class*=val] is applied to both divs, but the [class~=val] is applied to the one where the val is separated by whitespaces from the other parts of an attribute.

Please, DO NOT use w3schools. It's a bad site. You can find more about why it's bad here.

You can find good reference about CSS3 selectors on w3c:

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"

http://www.w3.org/TR/selectors/#selectors

This is why people around here discourage the use of w3schools.com as a reference site. The descriptions of the two selectors on their site really don't make it easy to distinguish them.

A better resource to use would be the official W3C documentation -- it's fairly clear about the difference: http://www.w3.org/TR/selectors/

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"

Basically, the difference is that *= is a dumb wildcard; it will just look for the matching string no matter where it appears or what is around it, whereas ~= is a word-break wildcard; it will look for the matching value provided it is a distinct word within the attribute. The matching word must be surrounded on both sides either by white space or the begining/end of the string.

From this page:

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"

*= is for substring

~= is for word search

for example:

"these are test words"

attribute~="est" <= selected

attribute~="est" <= not selected (because "est" doesn't exist as a word)

Check this link: http://www.w3schools.com/cssref/css_selectors.asp

From the jquery selector documentation:

Attribute Contains Selector [name*="value"] Selects elements that have the specified attribute with a value containing the a given substring.

Attribute Contains Word Selector [name~="value"] Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

In other words, using ~= requires "value" to be word/token, so "asdfword" would not be selected, where as "asdf word" would. Using *= just looks for a substring so both "asdfword" and "asdf word" would be selected.