為什么我的 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 的請求時：