Pouvez-vous appliquer plusieurs pseudo-éléments :before au même élément ?

Plusieurs :avants pseudo-éléments peuvent-ils exister pour le même élément ?

Question :

Est-il possible d'appliquer plusieurs pseudo-éléments :before au même élément ? Par exemple :

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Réponse :

Non, CSS2.1 spécifie qu'un élément ne peut avoir qu'un seul pseudo-élément de n'importe quel type à un moment donné. . Cela signifie que même si un élément peut avoir à la fois un pseudo-élément :before et un :after, il ne peut pas en avoir plus d'un de chaque type.

Par conséquent, lorsque plusieurs règles :before ciblent le même élément, ils sont regroupés en un seul pseudo-élément :before. Par exemple, le code ci-dessus se réduit à :

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Seule la dernière déclaration de contenu, qui a la priorité la plus élevée, prend effet.

Solutions de contournement :

Si vous souhaitez appliquer plusieurs pseudo-éléments :before au même élément, vous pouvez utiliser des sélecteurs combinés pour spécifier exactement ce que le navigateur doit faire. Par exemple :

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

Cela créera deux pseudo-éléments :before avec un contenu et un style différents.

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!