html - [att~=val] 与 CSS 属性选择器中的 [att*=val] 究竟有何不同？

Question

也许我遗漏了什么，但它们看起来很相似。例如，如果您使用...

a[alt~="thumb"]

或者...

a[alt*="thumb"]

我可以将选择范围缩小到哪些不同？我的理解是 ~ 在引号中给你一个部分匹配，而 * 给你一个部分匹配。我打算稍微修改一下代码，但由于我在这里找不到关于这个主题的问题，所以我认为无论哪种方式它都会成为一个很好的主题。

Answer 1

来自 JQuery 帮助(支持标准选择器):

a[alt~="thumb"]

Description: Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

a[alt*="thumb"]

Description: Selects elements that have the specified attribute with a value containing the a given substring. This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.

基本上，选择器 ~= 只有在值被空格包围时才匹配。如果在任何地方找到该值，选择器 *= 匹配。

<div alt='heading navigation'>
<div alt='head'>

div[alt~='head'] 将仅匹配第二个 div，但 div[alt*='head'] 将匹配两者。