CSS中[att | = val]和[att〜= val]有什么区别 [英] What is the different between [att|=val] and [att~=val] in css

问题描述

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

I am facing very difficulty to understand these two different attribute in CSS [att|=val] and [att~=val]. Can anyone simply give me explanation for it

谢谢

推荐答案

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

[attr|=val] matches a word in val in any form, so [class=div] would match .my-div, .div, but not .mydiv.

[attr〜= val] 与 val 中的完整单词匹配，因此 [class〜= div] 将与匹配.div ，但不是 .mydiv 或 .my-div .

[attr~=val] matches a complete word in val, so [class~=div] would match .div, but not .mydiv or .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 */
}

这篇关于CSS中[att | = val]和[att〜= val]有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！