JQueryを使用してコンテンツCSSを置換する

Question

jQueryを使用してCSSのタグのコンテンツを置き換えたいとします。

この場合、コンテンツ "My content"を "New Content"にします。

私は、この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のセレクタを変更して、元のルールよりも十分な特異性を持つようにします。あなただけの非常にありがとうございました

$("<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>