Question

我的测试表明:target选择器对仅在加载页面时存在于DOM中的元素有影响。我是对的吗？

我无法在此处创建代码段，因为我无法使用哈希（#）调用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添加到正文后，他没有“获得”样式。只有当您点击再次呼叫到同一网址的链接时，才会应用该样式。

更新

进一步@ BoltClock♦的评论，这发生在Chrome和FireFox中，但在IE中（很奇怪）它正在按预期工作。

Answer 1

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

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

<强> 6.6.2。目标伪类：目标

某些URI指的是资源中的位置。这种URI以＆＃34;数字符号＆＃34;结尾。（＃）后跟一个锚标识符（称为片段标识符）。

带有片段标识符的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导航到片段标识符

...


如果DOM中的元素具有与解码的fragid完全相同的ID，则树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法。

没有解码的fragid：如果DOM中有一个元素具有name属性，其值正好等于fragid（未解码的fragid），则树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法。

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

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

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

1 个答案: