锚链接目标样式 (:target) 不适用于动态 HTML 内容

Question

我在 CSS 中设置了默认样式：

:target
    {
        animation-name: flash;
        animation-delay: 600ms;
        animation-duration: 1200ms;
        animation-iteration-count: 2;
    }

如果我 go 直接从 URL 栏到我的页面“mysite.com/mypage”，或者如果我刷新页面，那么当我点击页面上的任何锚链接时，将应用上述 Z2C56C360580420D2903DZDZ 样式。

但是，当我在我网站的另一个页面上并单击链接打开“mypage”时，它会加载到 AJAX 中（因此 HTML 是动态加载的）。 然后，如果我单击与之前在该页面中相同的锚链接，浏览器视图将正确移动到目标，但未应用 CSS 样式。

为什么？ 我已经花了大约 2 天的时间来解决这个问题。 我想知道 CSS 或类似的东西中是否存在错误。

PS：我可以显示整个代码，但我觉得它会令人困惑（这不是我的代码，我已经尝试破译了好几个小时），首先寻找一个普遍的答案

Answer 1

确保在将新元素添加到 DOM 之后将 hash 添加到位置：

 var i = 0; function addDiv(locationFirst) { var div = document.createElement("div"); div.id = "test" + i++; div.textContent = div.id; if (locationFirst) { document.body.appendChild(div); window.location.replace("#" + div.id); } else { window.location.replace("#" + div.id); document.body.appendChild(div); } }

 div { display: inline-block; background-color: green; border: 1px solid black; padding: 3em; margin: 0.1em; }:target { background-color: red; }

 <div onclick="addDiv()">click me. url hash first =:target not applied</div> <div onclick="addDiv(1)">click me. url hash last =:target applied</div>