:动态生成元素上的目标选择器不受影响

Question

我的测试显示:target选择器对仅在页面加载时存在于DOM中的元素的影响.我对吗？

我无法在此处创建代码段,因为我无法使用hash(#)调用iframe的代码段,因此您可以在此处查看问题:

http://output.jsbin.com/vixave#new_element

HTML按钮

<button onclick="addElement()">Add element</button>

CSS

div:target {
  background:red;
  color:#fff;
}

使用Javascript

function addElement() {
  document.body.innerHTML += '<div id="new_element">New element</div><br /><a href="#new_element">highlight</a>';  
}

在这个演示中,您可以看到,在您单击按钮并将div #new_element添加到正文后,他不会"获得"该样式.只有当您单击再次调用相同URL的链接时,才会应用该样式.

更新

进一步@ BoltClock♦的评论,这发生在Chrome和FireFox,但在IE(很奇怪),它正如预期的那样工作.

Answer 1

当存在片段（URL 中:targeta 之后的字符串）时应用选择器样式是正确的行为。#

指定的行为可以在 W3C选择器和HTML5规范中找到。

6.6.2. 目标伪类：target

某些 URI 引用资源内的位置。这种 URI 以“数字符号”(#) 结尾，后跟锚标识符（称为片段标识符）。

带有片段标识符的 URI 链接到文档中的某个元素，称为目标元素。例如，下面是一个指向 HTML 文档中名为section_2 的锚点的 URI：

http://example.com/html/top.html#section_2

目标元素可以由 :target 伪类表示。如果文档的 URI 没有片段标识符，则文档没有目标元素。

https://www.w3.org/TR/selectors/#target-pseudo

当文档加载并且根据以下算法没有有效name或属性时，文档没有有效的片段标识符。id

5.6.9 导航到片段标识符

...

5. 如果 DOM 中有一个元素的 ID 与解码后的 fragid 完全相同，则树顺序中的第一个这样的元素是文档的指示部分；在此停止算法。
6. 未解码的 fragid：如果 DOM 中存在一个 a 元素，其 name 属性的值恰好等于 fragid（未解码的 fragid），则树顺序中的第一个此类元素是文档的指示部分；在此停止算法。

https://www.w3.org/TR/html5/browsers.html#scroll-to-fragid

然而，似乎未指定供应商应如何处理具有等于 URL 片段的idorname属性的插入节点（这将在加载/导航文档时生成有效的片段标识符）。