The difference between css attribute selector *= and ~=

 spelling

 div[class*="red"] {
            background: red;
        }

 
        div[class~="red"] {
            background: red;
        }

*= indicates that the attribute value contains red, such as class="ared"

~= indicates that the attribute value must be red, neither more nor less, only class="red" can be selected