В CSS2.1 элемент может иметь не более одного псевдоэлемента любого типа в любое время. (Это означает, что элемент может иметь как a, так :before
и :after
псевдоэлемент - просто он не может иметь более одного элемента каждого типа.)
В результате, когда у вас есть несколько :before
правил, соответствующих одному и тому же элементу, все они будут каскадироваться и применяться к одному :before
псевдоэлементу, как и к обычному элементу. В вашем примере конечный результат выглядит так:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Как видите, content
вступит в силу только объявление с наивысшим приоритетом (как уже упоминалось, последнее) - остальные объявления отбрасываются, как и в случае с любым другим свойством CSS.
Это поведение описано в разделе « Селекторы» CSS2.1 :
Псевдоэлементы ведут себя так же, как настоящие элементы в CSS, за исключением описанных ниже и в других местах.
Это означает, что селекторы с псевдоэлементами работают так же, как селекторы для обычных элементов. Это также означает, что каскад должен работать точно так же. Странно, но CSS2.1 кажется единственным справочником; ни css3-selectors, ни css3-cascade вообще не упоминают об этом, и еще неизвестно, будет ли это разъяснено в будущей спецификации.
Если элемент может соответствовать нескольким селекторам с одним и тем же псевдоэлементом, и вы хотите, чтобы все они каким-то образом применялись, вам нужно будет создать дополнительные правила 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
не накапливается.::before
или::after
псевдоэлементов.Если у вашего основного элемента есть дочерние элементы или текст, вы можете его использовать.
Разместите свой основной элемент относительным (или абсолютным / фиксированным) и используйте оба: до и: после позиционирования абсолютного (в моей ситуации он должен был быть абсолютным, не знаю о вашем).
Теперь, если вам нужен еще один псевдоэлемент, прикрепите absolute: before к одному из дочерних элементов основного элемента (если у вас есть только текст, поместите его в диапазон, теперь у вас есть элемент), который не является относительным / абсолютным / фиксированным .
Этот элемент начнет вести себя так, как будто его владелец - ваш главный элемент.
HTML
CSS
источник
.modal:first-child:before { …
Я решил это, используя:
Используя семейство шрифтов «font awesome 5 free» для значка, и после этого мы должны указать шрифт, который мы используем снова, потому что, если мы этого не сделаем, навигатор будет использовать шрифт по умолчанию (раз новый римский или что-то вроде этот).
источник