Совсем не вижу разницы между этими методами поиска внутри атрибутов.
Задания в курсе так же не помогают понять принципиального отличия.
Помогите разобраться
[foo*=“bar”] - поиск подстроки везде. Будут выбраны все элементы, у которых значение атрибута foo содержит подстроку “bar” на любой позиции.
[foo~=“bar”] - поиск слов внутри строки. Такой селектор выберет все элементы, у которых значение атрибута “foo” содержит слово “bar”.
[foo|=“bar”] - В данном случае будут выбраны все элементы, у которых значение атрибута “foo” содержит префикс “bar”, то есть либо полностью совпадает с “bar”, либо начинается со строки “bar-”.
Помогают, просто надо внимательно читать.
В описании первого [foo*=“bar”] упоминается “подстройка” bar - то есть часть слова.
В описании второго [foo~=“bar”] - bar - это целое слово.
В описании третьего [foo|=“bar”] даже разделяют на два селектора, чтобы было понятно:
[foo=“bar”] - значение атрибута равно bar.
[foo^=“bar-”] - значение атрибута начинается с bar.
В некотором смысле третье - это комбинация первого и второго.
Спасибо за объяснение - стало понятнее, но имхо это не я невнимательно читал, а текст и примеры недостаточно внятные чтобы продемонстрировать разницу между селекторами.
В любом случае вы всегда можете почитать дополнительно по каждой теме, которая вызывает вопросы. Теория в курсах - это минимум, есть еще книги, сайты-справочники.