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

标签 html css css-selectors

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

a[alt~="thumb"]

或者...

a[alt*="thumb"]

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

最佳答案

来自 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'] 将匹配两者。

关于html - [att~=val] 与 CSS 属性选择器中的 [att*=val] 究竟有何不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10442963/

相关文章:

javascript - 如果其中一个 div 是自动调整大小,则使 2 个 div 垂直显示以填充它的父级

html - 为什么我的响应式网站在移动设备上会放大?

html - 填充整页 div,每边减去填充

html - 新文件的 Sublime Text 2 默认文件类型

xpath - 使用 Sahi 驱动程序使 CSS 选择器(第一个 child )在 Behat 3 中工作

Android 4.x 上 phonegap 的 HTML 5 音频标签问题(无声音)

javascript - 在javascript中使用全局函数是否有效?

css - 为什么我的css对a :link , a :visited, a :hover, a :active?不生效

css - 在 LESS CSS 中使用通用选择器作为 mixin

html - Internet Explorer 中选择标签选项中的 CSS 伪元素