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

Question

我很难理解 CSS [att|=val] 和 [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 */
}