Quelle est la différence entre [att | = val] et [att ~ = val] en css

Question

Je suis confronté à une très grande difficulté à comprendre ces deux attributs différents dans CSS [att|=val] and [att~=val]. Quelqu'un peut-il simplement me donner une explication pour elle

grâce

Answer 1

[attr|=val] correspond à un mot val sous quelque forme, donc [class=div] correspondrait .my-div, .div, mais pas .mydiv.

[attr~=val] correspond à un mot complet en val, donc [class~=div] sélectionnne .div', but not .mydiv or .mon-div`.

Exemple:

HTML

<div id="myDiv"></div> 
<div id="myDiv2"></div> 
<div id="new-div"></div> 

CSS

div[id|=myDiv] { 
    /* Matches the first div */ 
} 
div[id|=my]{ 
    matches first two divs 
} 
div[id|=new]{ 
    /* Matches second div - the hyphen counts as a word separator */ 
} 
div[id~=Div]{ 
    /* Matches nothing - "Div" is not a separate word */ 
}