What's the difference between [attribute|=value] and [attribute^=value] CSS selectors?
<p>What is the difference between the following two CSS selectors?</p>

<p><code>[attribute|=value]</code> and <code>[attribute^=value]</code></p>

<p>On <a href="http://en.wikipedia.org/wiki/W3Schools" rel="nofollow">W3Schools</a>, the documentation says:</p>

<blockquote>
  <p>[lang|=en]    Selects all elements with a lang attribute value starting with "en"</p>
  
  <p>a[href^="https"]    Selects every <code>&lt;a&gt;</code> element whose href attribute value begins with "https"</p>
</blockquote>

<p>Is there a difference between "starting with" and "begins with" or will the two selectors match the same elements?</p>