什么是以下css选择器之间的区别

Question

a[attribute~=val]{
}


a[attribute|=val]{
}


a[attribute*=val]{
}

通常我会使用最后一个..但是它们之间的区别是什么

Answer 1

a[attribute~=val]

匹配a元素和attribute属性，其值包含单词“val”，以空格分隔。

a[attribute|=val]

匹配a元素与attribute属性，其值正好为“val”，或以“val - ”开头。

a[attribute*=val]

匹配a元素和attribute属性，其值包含字符串“val”。

---

您可以通过reading the CSS selectors specification轻松找到自己。

Answer 2

属性包含字选择器~=将找到由空格分隔的单词。例如，它会在"Jon"中找到"Jon Peters"，但不会在"Jonathan Peters"中找到。

属性包含前缀选择器|=将找到用短划线分隔的前缀。例如，它会在"en"中找到"en-GB"但不会在"english"或"kal-en"中找到。

属性包含选择器*=将在属性值内的任何位置找到文本。