CSS疑似要素のスタイルを変更する方法

この記事では、CSS の疑似要素のスタイルを変更する方法を紹介します。フロントエンド CSS を学習している友人の参考になれば幸いです。

#1. CSS 擬似要素

CSS 擬似要素は、特殊効果を設定するために使用されます。

擬似要素の使用法は次のとおりです。

selector:pseudo-element {property:value;}

CSS クラスは擬似要素でも使用できます

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;
}

疑似要素を変更するにはどうすればよいですか?擬似要素は DOM ツリー内にいくつかの抽象要素を作成しますが、これらの抽象要素はドキュメント言語には存在しない、つまり HTML ソース コードには存在しないため、これらの擬似要素はセレクターを通じて選択できません。疑似要素を選択できないため、疑似要素のスタイルを変更するにはどうすればよいですか?

2. 解決策 1

style タグを追加して擬似要素のスタイルをオーバーライドすることで、擬似要素を再定義します。方法は次のとおりです:

$(".content").append("<style>.content::before{display:none}</style>");

しかし、この解決策には問題があります。元のスタイルが上書きされるため、このタイプのすべてのタグに影響します。

3. 解決策 2

より良い解決策は、新しい CSS クラスを追加して疑似要素の一部のスタイルを変更することです。方法は次のとおりです:

1) 新しい CSS クラスを定義します。

たとえば、新しい CSS クラスを追加します:

.change::before {
    background: red;
}

2) 新しいクラスを追加して、疑似要素のスタイルを変更します。

JQuery で ID セレクターと CSS セレクターを使用し、addClass() を使用して追加および変更します。例は次のとおりです:

$("#content1").addClass("change");

以上がCSS疑似要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。