通過jQuery替換內容css

Question

我想通過jQuery替換CSS中標籤的內容。

在這種情況下，內容「我的內容」爲「新內容」。

我有這樣的CSS代碼：

a.appari:focus:after{ 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    bottom: 26px; 
    color: #fff; 
    content: "My content"; 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 400px; 
} 

我想這jQuery代碼：

function prova() { 
{ 
?> 
<script> 
(function($){ 
    $(document).ready(function(){ 
    $('.appari').click(function(){   
     $("<style>.appari:focus:after { content: 'New Content'; }</style>").appendTo("head") 
    }); 
}); 

})(jQuery); 
</script> 

<?php 

    } 
} 

感謝您的幫助。

Answer 1

您正遇到CSS特性問題。更改jQuery中的選擇器，使其具有比原始規則更多的特性。你可以只添加一個a到.appari所以它的a.appari（符合你原來的CSS特異性）

$("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head") 

$('.appari').click(function() { 
 
    $("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head"); 
 
});

a.appari:focus:after { 
 
    background: #333; 
 
    background: rgba(0, 0, 0, .8); 
 
    border-radius: 5px; 
 
    content: "My content"; 
 
    padding: 5px 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="appari">foo</a>