For example, between: a[href^='http'] or a[href|='http']

    2 answers 2

    |= requires that the first word of the attribute value matches (the word separator is - )
    ^= - just matches the beginning of the attribute value:

     [class^="top"] { background: green; } [class|="top"] { background: red; } 
     <span class="toptoptop">попадает только под первый селектор</span> <span class="top-something">попадает под оба, применяется второй</span>

      a[href^='http'] - href links start with http

      a[href|='http'] - the link href starts with http after which there is a hyphen OR is http

      Source: https://learn.javascript.ru/css-selectors#selectors- attributes

      • Not quite, the second case is treated differently. The style is applied to elements whose attribute begins with the specified value or with a fragment of a value, after which a hyphen appears. In your example, a hyphen is also indicated, it was necessary to mention about him htmlbook.ru/samcss/selektory-atributov - Daniel-664
      • Thank you, updated answer - stckvrw