css中[att|=val]和[att~=val]有什么区别

Question

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

谢谢

Answer 1

[attr|=val] 匹配任何形式的val 中的单词，因此[class=div] 将匹配.my-div、.div，但不匹配.mydiv。

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