How do these css selectors differ?

[attribute] [target] Selects all elements with a target attribute

[attribute=value] [target=_blank] Selects all elements with target="_blank"

[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"

[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"

[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"

[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"

[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"

http://www.w3schools.com/cssref/css_selectors.asp

question: What is the difference between | and ^ ? Are they the same?

Likewise, what is the difference between ~ and * ? Are they the same?

Seems a little odd that | and ~ are included if they are the same. Seem like | and ~ were added in version 2. Decided to go with more conventional symbols of ^ and * in version three.

R