稍微延迟后应用CSS规则

Question

我头上有以下嵌入式CSS代码：

div {
    display: none;
}

div:nth-child(3),
div:target {
    display: inline-block;
}

div:target~div {
    display: none;
}

HTML的结构如下：

<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>

基本上，在没有有效片段标识符的情况下，＃c将显示，否则将显示与片段标识符对应的id的div。

===

我的问题是，当我加载像“http://example.com#a”这样的东西时，在显示#a之前会有20秒的闪光#c。

当我查看幻灯片时，很明显内容已经被设置了样式，那么规则“div：target”在“div：nth-child（3）”之后20ms生效怎么办？

当然，我只在最新的Chrome中测试过它，所以我不知道它是否会在其他浏览器中出现。

Answer 1

好吧，所以在@Intervalia说了之后，我去检查我的JavaScript只是为了看看它是否有任何区别，即使那里没有任何混乱的哈希。

我发现的是：

有脚本标记是导致此问题的原因。脚本标记内没有JS并不重要。我不知道如何以及为什么，但只是在文件正文中有<script></script>导致这一点。