代码之家 › 专栏 › 技术社区 › Kaiido NickSlash

为什么半属性选择器不引入dom选择器

css-selectors dom css javascript

Kaiido NickSlash · 技术社区 · 6 年前

所以,这可能是个虫子…我错误地输入了css路径,以检查已经处理过的元素是否以特定的onclick函数开头 "ajaxLoad("

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

如您所见,我忘记关闭属性访问器 ] 像这样:

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

奇怪的是,它成功了!

编辑 -不,我没有,我实际上运行了正确的css选择器:
document.querySelectorAll( 'a[onclick^="ajaxLoad("]' )
…但正如评论中所提到的,显然这种进一步的排版也有效!

这显然是无效的。我发现它时,我来添加另一种类型的链接,类 tc-link ,并想知道我是否可以像在css样式表中那样将其链接为:

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

答案是你可以通过关闭括号,但是不当这个输入错误时。

未捕获的domexception:未能对“document”执行“queryselectorall”:“a[onclick^=”ajaxload(“,tc link”不是有效的选择器。

它工作在 ^= , $= 和 *= ,从我所看到的情况来看,在Firefox或Opera中没有发生(而且我也没有任何其他浏览器可以测试)。

一开始我以为这是一种语言怪癖,但后来我修改了一个问题:有人能计算出哪个级别(dom)吗?V8?呃。。WebKIT?我不太了解与此相关的javascript/browser代码的来龙去脉,以及在哪里可以得到报告/修复?

0 回复 | 直到 6 年前

TylerH Ash Burlaczenko 6 年前

这是基于原始意见的,离最终的答案还很远。

浏览器非常复杂。完成!在他们身上什么都无法预料。

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

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=" (遗失) "])) )

到目前为止,这是找到的名单。我可以确认这些在Windows7上的Google Chrome 41.0.2272.89m上运行。

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

这可能是一个bug或一个特性(又称,作为特性提交的一个令人尴尬的bug),以缓和css引擎的急切。这也会影响jquery,因为jquery只使用 Sizzle 如果 document.querySelectorAll() 不存在或引发异常。

再过一段时间我们就能找到更多。

免责声明:

这种行为 不应该 依靠和可以未来的变化。
这都是基于无效选择器和无效语法(像一些旧版本的ie css黑客)。所有上面列表中的工作选择器不符合规范。

作为示例给出的“未固定”选择器( A ) 作品在jquery中,但这与这个问题无关。实际上,jquery将作为 a .

Zilk 7 年前

大多数浏览器接受缺少右括号的原因是它们都遵循相同的算法 CSS specification . 在Chromium BugTracker上对此进行了讨论;以下是 comment 它关闭了一个漏洞,就像wontfix一样:

当您解析字符串“a[b=c”(来自示例链接)时,css解析器将其转换为:
IDENT(A)
SIMPLE [ BLOCK:
    IDENT(B)
    DELIM(=)
    IDENT(C)
方括号块未关闭的事实已丢失。您可以将其视为解析器“自动关闭所有未关闭的块”。如果您使用的是符合规范的解析器,那么实际上不可能检测到未关闭的块,除非您为此目的单独执行一个特殊的解析。

(我知道我在挖掘一个老问题 comes up 有时,链接和解释可能很有用。)