Css [attribute~=value]和[attribute*=value]之间的差异

我找不到这两个选择器之间的区别。两者似乎做了相同的事情，即基于包含给定字符串的特定属性值选择标记

对于[属性~=值]：

对于[attribute*=value]：

*=表示子字符串

~=用于单词搜索

例如：

这些是测试词

attribute~=estw3schools是一个源，与W3C无关。相反，请咨询：

[attribute~=value]匹配空格分隔列表中的任何条目。 它与attribute=a值b匹配，但与attribute=a值b不匹配

[属性*=值]匹配任何子字符串。 它与attribute=a值b和attribute=a值b匹配，但与attribute=x不匹配。

E[foo~=bar]一个E元素，其foo属性值是一组以空格分隔的值，其中一个值正好等于bar

---

E[foo*=bar]其foo属性值包含子字符串bar的E元素

请不要使用w3。这是一个糟糕的网站。你可以找到更多关于它为什么不好的信息

您可以在w3c上找到有关CSS3选择器的良好参考：

E[foo~=bar]一个E元素，其foo属性值是 以空格分隔的值，其中一个值正好等于bar

E[foo*=bar]其foo属性值包含 子串条

---

这就是为什么这里的人们不鼓励使用w3schools.com作为参考网站的原因。他们网站上对这两个选择器的描述确实不容易区分

一个更好的资源是W3C官方文档，它的区别非常明显：

E[foo~=bar]一个E元素，其foo属性值是一组以空格分隔的值，其中一个值正好等于bar

E[foo*=bar]其foo属性值包含子字符串bar的E元素

基本上，区别在于*=是一个哑通配符；它将只查找匹配字符串，不管它出现在哪里或周围是什么，而~=是一个分词通配符；它将查找匹配值，前提是它是属性中的一个不同单词。匹配单词的两侧必须用空格或字符串的开头/结尾包围。

来自：

属性包含选择器[名称*=值] 选择具有指定属性且值包含给定子字符串的元素

属性包含单词选择器[name~=value] 选择具有指定属性且值包含给定单词（由空格分隔）的元素

换句话说，使用~=要求值为word/token，所以不会选择asdfword，而asdfword会选择。 使用*=仅查找子字符串，以便同时选择asdfword和asdfword。

根据：

[att~=val]：表示具有att属性的元素，其值是一个以空格分隔的单词列表，其中一个单词就是val。如果val包含空格，它将永远不会表示任何内容，因为单词是由空格分隔的。另外，如果val是空字符串，它将永远不会表示任何内容

[att*=val]：表示具有att属性的元素，其值至少包含子字符串val的一个实例。如果val是空字符串，则选择器不表示任何内容

所以，主要的区别是*意味着val可能在属性值中的任何位置，但是在~的情况下，val必须是值的确切部分，它可以像class属性一样用空格分隔

你可以在这里看到它的作用：

---

[class*=val]应用于两个div，但[class~=val]应用于val与属性其他部分之间用空格分隔的div。

我一直想知道为什么它们仍然存在！使用asp而不是asp.net或更合适的asp.net mvc。@BasaratAli W3学校在IIS 6上使用asp.net。在FrontPage上使用smarty/php/Apache，而在其他方面则主要使用静态网页。问题在于w3schools误导性的名称、过时/错误的内容以及它们在谷歌的高排名。