Dans CSS2.1, un élément ne peut avoir au plus qu'un pseudo-élément quelconque à tout moment. (Cela signifie qu'un élément peut avoir à la fois un :before
et un :after
pseudo-élément - il ne peut tout simplement pas en avoir plus d'un de chaque type.)
En conséquence, lorsque vous avez plusieurs :before
règles correspondant au même élément, elles seront toutes en cascade et s'appliqueront à un seul :before
pseudo-élément, comme avec un élément normal. Dans votre exemple, le résultat final ressemble à ceci:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Comme vous pouvez le voir, seule la content
déclaration qui a la priorité la plus élevée (comme mentionné, celle qui vient en dernier) prendra effet - le reste des déclarations est ignoré, comme c'est le cas avec toute autre propriété CSS.
Ce comportement est décrit dans la section Sélecteurs de CSS2.1 :
Les pseudo-éléments se comportent comme de vrais éléments en CSS avec les exceptions décrites ci-dessous et ailleurs.
Cela implique que les sélecteurs avec pseudo-éléments fonctionnent exactement comme les sélecteurs pour les éléments normaux. Cela signifie également que la cascade doit fonctionner de la même manière. Étrangement, CSS2.1 semble être la seule référence; ni css3-selectors ni css3-cascade ne le mentionnent du tout, et il reste à voir si cela sera clarifié dans une spécification future.
Si un élément peut correspondre à plus d'un sélecteur avec le même pseudo-élément et que vous souhaitez que tous s'appliquent d'une manière ou d'une autre, vous devrez créer des règles CSS supplémentaires avec des sélecteurs combinés afin de pouvoir spécifier exactement ce que le navigateur doit faire dans ces cas. Je ne peux pas fournir un exemple complet incluant la content
propriété ici, car il n'est pas clair, par exemple, si le symbole ou le texte doit venir en premier. Mais le sélecteur dont vous avez besoin pour cette règle combinée est soit .circle.now:before
ou .now.circle:before
- quel que soit le sélecteur que vous choisissez est votre préférence personnelle car les deux sélecteurs sont équivalents, c'est uniquement la valeur de la content
propriété que vous devrez définir vous-même.
Si vous avez encore besoin d'un exemple concret, voyez ma réponse à cette question similaire .
La spécification de contenu css3 héritée contient une section sur l'insertion de plusieurs ::before
et ::after
pseudo-éléments en utilisant une notation compatible avec la cascade CSS2.1, mais notez que ce document particulier est obsolète - il n'a pas été mis à jour depuis 2003, et personne ne l'a mis en œuvre cette fonctionnalité au cours de la dernière décennie. La bonne nouvelle est que le document abandonné subit activement une réécriture sous le couvert de css-content-3 et css-pseudo-4 . La mauvaise nouvelle est que la fonctionnalité de pseudo-éléments multiples ne se trouve nulle part dans l'une ou l'autre spécification, probablement en raison, encore une fois, du manque d'intérêt de l'implémenteur.
circle
et à la classenow
, les deux règles s'appliquent au:before
pseudo-élément de l'élément, mais le CSS normal implique qu'un seul descontent
paramètres peut prendre effet (par des règles de cascade normales). Le fait est quecontent
cela ne s'accumule pas.