在Wordpress上使用：target伪类时，为什么不应用我的CSS样式？

Question

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

问题是，当我采用完全相同的代码并将其应用于此处的Wordpress网站时：https://goals.brandoncollins.org/test-target无效。

出于某些原因，基本上未将样式应用于：target元素。但我不知道为什么。奇怪的是，如果我在新标签中以#creategp结尾打开该链接，则该样式最初将打开模式。当我单击关闭图标时，它也可以删除样式并按预期隐藏模式。但是，再次单击模式将无法像以前一样工作。

那么为什么不应用样式呢？另外，为什么将它们应用到新标签上？

<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和样式添加到我的wordpress网站时，除非在新标签页中将其打开，否则它将无法正常工作。然后它只能工作一次。

Answer 1

我使用chrome工具进行了一些调试，因此您的CSS代码无法正常工作：

  

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

当我阻止该js网址的请求时：