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>会导致这种情况。