CSS селекторы

http://htmlbook.ru/samcss/selektory-atributov

1. равен 2. начинается с

Равен - [attr=val].

Посмотрел статью, там написано, что если в значении атрибута есть дефис, то нужно использовать [attr|=val], но не написано почему. Работают оба варианта.

упс, не увидел палку

[attr|=val] нужен для случаев, когда атрибут либо равен val, либо начинается с val и далее сразу идёт дефис. Это было придумано (по словам документации w3) для работы с атрибутами, где есть языковые коды. То есть предназначалось для строк вроде en и en-US.

[attr^=val] просто ловит атрибут, начинающийся на val.

Наличие двух похожих по функциональности селекторов, один из которых ещё и более специализированный, можно объяснить тем, что |= появился в css 2.1, а ^= только в css 3. Соответственно, первый остался для совместимости.