この記事では、CSS の疑似要素のスタイルを変更する方法を紹介します。フロントエンド CSS を学習している友人の参考になれば幸いです。
#1. CSS 擬似要素
CSS 擬似要素は、特殊効果を設定するために使用されます。 擬似要素の使用法は次のとおりです。selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
2. 擬似要素のスタイルを変更します
(推奨学習:CSS チュートリアル)
1. 問題の説明疑似要素の例:.content { width: 100px; height: 100px; margin: 0 auto; background: black; } .content::before { content: ""; width: 20px; height: 20px; position: absolute; background: blue; }
2. 解決策 1
style タグを追加して擬似要素のスタイルをオーバーライドすることで、擬似要素を再定義します。方法は次のとおりです:
$(".content").append("<style>.content::before{display:none}</style>");
3. 解決策 2
より良い解決策は、新しい CSS クラスを追加して疑似要素の一部のスタイルを変更することです。方法は次のとおりです:1) 新しい CSS クラスを定義します。 たとえば、新しい CSS クラスを追加します:
.change::before { background: red; }
$("#content1").addClass("change");
以上がCSS疑似要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。