css中[att | = val]和[att~ = val]之间的区别是什么？

Question

我很难理解CSS [att|=val] and [att~=val]中的这两个不同属性。谁能简单地给我解释呢

感谢

Answer 1

[attr|=val]以任何形式匹配val中的字词，因此[class=div]将匹配.my-div，.div，但不匹配.mydiv。< / p>

[attr~=val]匹配val中的完整字词，因此[class~=div]将与.div匹配，但不会与.mydiv或.my-div匹配。

示例：

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 */
}