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

angryTom
リリース: 2020-02-24 18:14:00
転載
4038 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート