Разница между [атрибут ~ = значение] и [атрибут * = значение]

Question

Я не могу найти разницу между этими двумя селекторами. Кажется, что оба делают одно и то же, то есть выбирают теги на основе определенного значения атрибута, содержащего данную строку.

Для [attribute~=value]: http://www.w3schools.com/cssref/sel_attribute_value_contains.asp

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

Answer 1

w3schools является общеизвестно ненадежным источником и не имеет отношения к W3C. Вместо этого обратитесь к официальному стандарту CSS :

[attribute~=value] соответствует любой записи в списке, разделенном пробелами.
Это соответствует attribute="a value b", но не attribute="a valueb".

[attribute*=value] соответствует любой подстроке.
Это соответствует attribute="a value b" и attribute="a valueb", но не attribute="x".

Answer 2

Согласно Спецификации :

[att~=val]: Представляет элемент с атрибутом att, значением которого является список слов, разделенных пробелами, одним из которых является именно «val». Если «val» содержит пробел, он никогда ничего не будет представлять (так как слова разделены пробелами). Также, если «val» - пустая строка, она никогда ничего не будет представлять.

[att*=val]: представляет элемент с атрибутом att, значение которого содержит хотя бы один экземпляр подстроки "val". Если «val» - пустая строка, то селектор ничего не представляет.

Итак, основное отличие заключается в том, что * означает, что val может быть где угодно в значении атрибута, но в случае ~ val должна указывать точную часть значения, которая может быть разделена пробелы (например, атрибут class).

Вы можете увидеть это в действии здесь: http://jsfiddle.net/kizu/bPX9n/

[класс * = val] применяется к обоим элементам div, но [класс ~ = val] применяется к тому, где val отделяется пробелами от других частей атрибута.

Answer 3

Пожалуйста, НЕ используйте w3schools.Это плохой сайт.Вы можете узнать больше о том, почему это плохо здесь .

Вы можете найти хорошую справку о селекторах CSS3 на w3c:

E [foo ~ = "bar"] элемент E, у которого значение атрибута "foo" является списком значений, разделенных пробелами, одно из которых точно равно "bar"

E [foo * = "bar"] элемент E, чье значение "foo""значение атрибута содержит подстроку" bar "

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

Answer 4

Именно поэтому люди здесь не рекомендуют использовать w3schools.com в качестве справочного сайта. Описания двух селекторов на их сайте действительно не позволяют легко их различить.

Лучшим ресурсом для использования была бы официальная документация W3C - в этом разница довольно очевидна: http://www.w3.org/TR/selectors/

E [foo ~ = "bar"] элемент E, у которого значение атрибута "foo" представляет собой список значений, разделенных пробелами, одно из которых точно равно "bar"

E [foo * = "bar"] элемент E, значение атрибута которого "foo" содержит подстроку "bar"

В основном, разница в том, что *= - тупой подстановочный знак; он просто будет искать соответствующую строку независимо от того, где она находится или что находится вокруг нее, в то время как ~= является подстановочным знаком разбиения по словам; он будет искать соответствующее значение при условии, что это отдельное слово в атрибуте. Соответствующее слово должно быть окружено с обеих сторон либо пробелом, либо началом / концом строки.

Answer 5

Из документации по селектору jquery :

Атрибут содержит селектор [name * = "value"] Выбирает элементы, имеющие указанный атрибут, со значением, содержащим данную подстроку.

Атрибут содержит селектор слов [name ~ = "value"] Выбирает элементы, имеющие указанный атрибут, со значением, содержащим данное слово, разделенные пробелами.

Другими словами, использование ~ = требует, чтобы «значение» было словом / токеном, поэтому «asdfword» не будет выбрано, а «asdf word» будет. Использование * = просто ищет подстроку, поэтому будут выбраны «asdfword» и «asdf word».

Answer 6

С этой страницы :

E [foo ~ = "bar"] элемент E, значение атрибута которого "foo" представляет собой список значений, разделенных пробелами, одно изв точности равный "bar"

E [foo * = "bar"] элемент E, значение атрибута которого "foo" содержит подстроку "bar"

Answer 7

*= для подстроки

~= для поиска слова

например:

"these are test words"

attribute~="est" <= выбрано </p>

attribute~="est" <= не выбран (потому что "est" не существует как слово) </p>

Проверьте эту ссылку: http://www.w3schools.com/cssref/css_selectors.asp