javascript - “*[attribute^="string""如何/为什么是有效的查询选择器?(JS 错误?)

标签 javascript css google-chrome css-selectors

所以,这可能是一个错误...我输入错误的 CSS 路径来检查已处理的元素是否具有以 "ajaxLoad("

开头的特定 onclick 函数
document.querySelectorAll( 'a[onclick^="ajaxLoad("' )

如您所见,我忘记使用 ] 关闭属性访问器,如下所示:

document.querySelectorAll( 'a[onclick^="ajaxLoad(]"' )

奇怪的是,它奏效了!

Edit - no I didn't, I actually ran the correct CSS selector:

document.querySelectorAll( 'a[onclick^="ajaxLoad("]' )

... but as mentioned in the comments apparently this further typo also works!

这显然是无效的。当我开始添加另一种类型的链接时,我发现了它,属于 tc-link 类,并且想知道我是否可以像在 CSS 样式表中那样将它链接起来:

document.querySelectorAll( 'a[onclick^="ajaxLoad(", a.tc-link' )

答案是您可以关闭括号,但不能留下这个错字。

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'a[onclick^="ajaxLoad(", a tc-link' is not a valid selector.

它适用于 ^=$=*=,据我所知,在 Firefox 或Opera(我没有任何其他浏览器可以测试)。

起初我认为这是一个语言怪癖,但修改了问题:任何人都可以算出 Javascript/浏览器代码的哪个级别(DOM?V8?呃.. webkit?我不太了解来龙去脉)这涉及到哪里可以报告/修复?

最佳答案

这主要是基于意见的,离确定的答案还差得很远。

浏览器极其复杂。完毕!没有什么是可以预测的。

首先,让我们分析一个错误的选择器列表:

  • a[onclick^="ajaxLoad("(缺少 ])
  • a[onclick^="ajaxLoad(]"(缺少 ])
  • a[onclick=""(缺少 ])
  • a[onclick="][onclick(缺少 "] 或缺少 "] 基于你需要什么)
  • a[onclick=""][onclick(缺少 ])
  • a[onclick="(缺少 "])
  • a[onclick(缺少 ])
  • a:not([onclick] (缺少 ))
  • a:not([onclick (缺少 ]))
  • a:not([onclick=" (缺少 "]))
  • a:nth-child(5):not([onclick=" (缺少 "]))
  • a:-webkit-any(:not([onclick=" (缺少 "])))

到目前为止,这是找到的列表。我可以确认这些适用于 Windows 7 上的 Google Chrome 41.0.2272.89m。

注意到模式了吗?很简单:Chrome 仍然可以使用选择器通过填充基本的缺失字符来匹配元素,但只能在最后! 缺少的东西是可以预测的,不需要太多的努力来修复。 但并非每个选择器都可以/将被“修复”(例如:a,,可以通过添加 * 来修复)。

这可能是一个错误或一个特性(又名,一个作为特性提交的令人尴尬的错误)来软化 CSS 引擎的渴望。这也会影响 jQuery,因为 jQuery 只使用 Sizzle如果 document.querySelectorAll() 不存在或抛出异常。

一段时间后,我们可以找到更多。

免责声明:

这种行为不应该被依赖并且可能在未来改变。
这一切都是基于无效选择器和无效语法(比如一些针对旧版本的 IE CSS Hacks)。 所有上面列表中的有效选择器都违反了规范。

作为示例给出的“未固定”选择器 (a,) 在 jQuery 中有效,但这与此问题无关。本质上,jQuery 会将其作为 a 执行。

关于javascript - “*[attribute^="string""如何/为什么是有效的查询选择器?(JS 错误?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29120822/

相关文章:

javascript - 在 Google 登录回调中使用 `router.navigate()` 后,Angular4 路由器中断

html - dl、dd、dt 和 ul li 之间有什么区别?

css - 访问过的链接未正确识别

html - 无法在 x3dom 中使用 indexedfaceSet 为面部着色

javascript - Chrome 中的 $ 变量(美元符号)?

javascript - Inject.js 未在页面上加载?

javascript - 禁用在 IE8 中有效,但在较低版本的 IE 中无效

javascript - 使用 JSON 数组查找用户的最佳时间

HTML/CSS div 结构

javascript - JSON 中的多行元素?