带波浪号和星形的属性选择器之间的CSS区别? [英] CSS difference between attribute selectors with tilde and star?

问题描述

给出以下CSS选择器

[attribute~=value] { }
[attribute*=value] { }

上面的两个选择器都应该做完全一样的事情吗?还是有区别?

Should both of the selectors above do exactly the same thing? Or is there a difference?

我相信有些不同，但是呢?我发现的唯一一个是，每对中的第一对在CSS 2的规范中，第二对在CSS 3的规范中.
还有什么吗?

I believe that there is some kind of a difference, but what? The only one which I spot is that the first of each pair is in the spec of CSS 2 and the second in spec of CSS 3.
Is there anything else?

小提琴

推荐答案

前者用于选择包含整个特定单词的元素.后者用于选择任何字符串包含，它不必是一个完整的单词.

The former is used to select elements that contain a whole specific word. The latter is used to select any string containment, it doesn't have to be a whole word.

div {
  padding: 30px;
}

/* Matches "foo", but not "fo" */
[attribute~=foo] {
  background: lightcoral;
}

/* Matches both "bar" and "ba" */
[attribute*=ba] {
  background: lavender;
}

<div attribute="foo"></div>
<div attribute="bar"></div>

这篇关于带波浪号和星形的属性选择器之间的CSS区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！