为什么我的 CSS styles 在使用：目标伪 class 时没有被应用？

Question

我在这里有一个codepen： https://codepen.io/tylerjms7/pen/ZEEvRyV ，我使用了：target pseudo class 作为打开和关闭模态的方式。

问题是当我采用完全相同的代码并将其应用于 Wordpress 站点时： https://goals.brandoncollins.org/test-target它不起作用。

基本上 styles 由于某种原因没有应用于:target 元素。 但我不知道为什么。 奇怪的是，如果我在一个新选项卡中打开该链接，最后带有#creategp，则样式最初将用于打开模式。 当我单击关闭图标时，它也可以删除 styles 并按预期隐藏模式。 但是然后再次单击模态将无法像以前那样工作。

那么为什么没有应用 styles 呢？ 另外，为什么要在新标签上应用它们？

<a href="#creategp" class="ty-modal-launch">Open Modal</a>
<!-- The Modal -->
<div id="creategp">
    <div class="ty-modal">
        <a href="#close" title="Close" class="closeit">X</a>
        <p>Modal Content</p>
    </div>
</div>


#creategp:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}


#creategp:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}

当我在 Codepen 中运行它时，我得到了我想要的。 但是，当我将这些相同的 HTML 和 styles 添加到我的 wordpress 站点时，它不起作用，除非我在新选项卡中打开它。 然后它只工作一次。

Answer 1

我使用 chrome 工具进行了一些调试，因此您的 CSS 代码不起作用：

目标.brandoncollins.org/wp-content/themes/pro/framework/dist/js/site/x.js?ver=3.0.4

当我阻止对该 js url 的请求时：