According to W3Schools:CSS Selector Разъяснение: | = против =
[foo|='bar'] "Выбирает все элементы с [Foo] атрибут, начиная с "бар"
и
[foo^='bar']" Выбирает каждый элемент, [Foo] значение атрибута начинается с «бар»
В моем приложении, у меня есть входы с идентификаторами «Input-123456» и т.д.
Выбор их вес с input[id^="Input-"] работает, тогда как input[id|='Input-'] ничего не возвращает.
Так в чем же разница?
С "реальной" ссылки (W3C):
E[foo^="bar"]E элемента, "Foo" значение атрибута начинается именно со строкой "бар"
E[foo|="en"]Е элемент которого "Foo" атрибут имеет дешифрованный список начальных значений (слева) с «en»
Всегда действуйте на самом стандарте, если существует несогласованность. Я стараюсь избегать w3schools, потому что их контроль качества иногда меньше звездного.
Полностью согласен. W3C трудно ориентироваться, но он (или должен быть) стандартом. MDN (у которого есть [хороший раздел об этом] (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)), тоже хорошо, но w3schools всегда, кажется, разочаровывает. –
W3C - это место, куда можно пойти, хотя иногда я перехожу к css-tricks.net, потому что мне нравятся их примеры. – seahorsepip
Gotcha, спасибо! Я нашел w3schools отличной ссылкой на простые вещи, но я замечаю все больше и больше тонкостей, что они ошибаются. Вид раздражающего имхо. – mhodges
https://css-tricks.com/attribute-selectors/
См | = раздел, разница в тире список разделенных.
Вот почему нам не нравятся w3schools ... –