У CSS2.1 елемент може мати лише максимум один із псевдоелементів у будь-який час. (Це означає, що елемент може мати як а, так :before
і :after
псевдоелемент - він просто не може мати більше одного з кожного виду.)
Як результат, коли у вас є кілька :before
правил, що відповідають одному і тому ж елементу, всі вони будуть каскадно застосовуватись до одного :before
псевдоелемента, як до нормального елемента. У вашому прикладі кінцевий результат виглядає приблизно так:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Як бачите, content
набирає чинності лише декларація, яка має найвищий пріоритет (як уже згадувалося, та, яка є останньою) - решта декларацій відкидаються, як це стосується будь-якого іншого властивості CSS.
Така поведінка описана в розділі " Селектори" CSS2.1 :
Псевдоелементи поводяться так само, як реальні елементи в CSS, за винятком, описаним нижче та в інших місцях.
Це означає, що селектори з псевдоелементами працюють так само, як і селектори для нормальних елементів. Це також означає, що каскад повинен працювати так само. Як не дивно, CSS2.1 видається єдиним посиланням; ні css3-селектори, ні css3-каскад про це взагалі не згадують, і залишається зрозуміти, чи буде це уточнено в майбутній специфікації.
Якщо елемент може збігатися з декількома селекторами з одним і тим же псевдоелементом, і ви хочете, щоб усі вони якось застосовувались, вам потрібно буде створити додаткові правила CSS з комбінованими селекторами, щоб ви могли точно вказати, що повинен робити браузер у цих справ. Я не можу навести повний приклад, включаючи content
тут властивість, оскільки не зрозуміло, наприклад, чи символ або текст мають бути першими. Але селектор, який вам потрібен для цього комбінованого правила, є .circle.now:before
або .now.circle:before
- будь-який вибраний вами вибір - це особисті переваги, оскільки обидва селектори еквівалентні, це лише значення content
властивості, яке вам потрібно буде визначити самостійно.
Якщо вам ще потрібен конкретний приклад, дивіться мою відповідь на це подібне запитання .
Спадкова специфікація вмісту css3 містить розділ про вставлення декількох ::before
та ::after
псевдоелементів за допомогою позначень, сумісних із каскадом CSS2.1, але зауважте, що цей конкретний документ є застарілим - він не оновлювався з 2003 року, і ніхто не має реалізував цю функцію за останнє десятиліття. Хороша новина полягає в тому, що покинутий документ активно переживає переписування під виглядом css-content-3 та css-pseudo-4 . Погана новина полягає в тому, що особливості псевдоелементів ніде не зустрічаються в жодній специфікації, імовірно, знову ж таки через відсутність інтересу до реалізатора.
circle
і до класуnow
, і до класу , обидва правила застосовуються до:before
псевдоелемента елемента, але звичайний CSS означає, що тільки одне зcontent
параметрів може набути чинності (за нормальними правилами каскаду). Справа в тому, щоcontent
не накопичується.