Comment changer le style des pseudo-éléments CSS

Cet article explique comment changer le style du pseudo-élément CSS. J'espère qu'il sera utile aux amis qui apprennent le CSS front-end !

1. Pseudo-éléments CSS

Les pseudo-éléments CSS sont utilisés pour définir des sélecteurs spéciaux Effet . L'utilisation du pseudo-élément

est la suivante :

selector:pseudo-element {property:value;}

La classe CSS peut également être utilisée avec le pseudo-élément

selector.class:pseudo-element {property:value;}

2. Modifier le style du pseudo -element

(Apprentissage recommandé : Tutoriel CSS)

1. Description du problème

Exemple de pseudo-élément :

.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
.content::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: blue;
}

Si on veut modifier le pseudo élément Comment faire ? Parce que les pseudo-éléments créent des éléments abstraits dans l'arborescence DOM, mais que ces éléments abstraits n'existent pas dans le langage du document, c'est-à-dire qu'ils n'existent pas dans le code source HTML, ces pseudo-éléments ne peuvent donc pas être sélectionnés via des sélecteurs. Puisque les pseudo-éléments ne peuvent pas être sélectionnés, comment puis-je modifier le style des pseudo-éléments ?

2. Solution 1

Redéfinissez le pseudo-élément en ajoutant une balise de style pour remplacer le style du pseudo-élément.

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

Mais il y a un problème avec cette solution. Parce que le style original est écrasé, cela affectera toutes les balises de ce type.

3. Solution 2

Une meilleure solution consiste à modifier certains styles de pseudo-éléments en ajoutant de nouvelles classes CSS. La méthode est la suivante :

1) Définissez une nouvelle classe CSS.

Par exemple, ajoutez une nouvelle classe CSS :

.change::before {
    background: red;
}

2) Ajoutez une nouvelle classe pour modifier le style du pseudo-élément.

Utilisez le sélecteur d'identifiant et le sélecteur CSS dans JQuery, puis utilisez addClass() pour ajouter et modifier. L'exemple est le suivant :

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

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!