W CSS2.1 element może mieć tylko jeden z dowolnego rodzaju pseudoelementu w dowolnym momencie. (Oznacza to, że element może mieć zarówno element :before
a, jak i :after
pseudoelement - po prostu nie może mieć więcej niż jednego elementu każdego rodzaju).
W rezultacie, gdy masz wiele :before
reguł pasujących do tego samego elementu, wszystkie będą kaskadowo stosowane do pojedynczego :before
pseudoelementu, tak jak w przypadku zwykłego elementu. W Twoim przykładzie wynik końcowy wygląda następująco:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Jak widać, tylko content
deklaracja, która ma najwyższy priorytet (jak wspomniano, ta, która jest ostatnia) odniesie skutek - reszta deklaracji zostanie odrzucona, tak jak w przypadku każdej innej właściwości CSS.
To zachowanie jest opisane w sekcji Selektory w CSS2.1 :
Pseudoelementy zachowują się jak prawdziwe elementy w CSS z wyjątkami opisanymi poniżej i gdzie indziej.
Oznacza to, że selektory z pseudoelementami działają tak samo, jak selektory normalnych elementów. Oznacza to również, że kaskada powinna działać w ten sam sposób. O dziwo, CSS2.1 wydaje się być jedynym odniesieniem; ani css3-selectors, ani css3-cascade w ogóle o tym nie wspominają i okaże się, czy zostanie to wyjaśnione w przyszłej specyfikacji.
Jeśli element może dopasować więcej niż jeden selektor do tego samego pseudoelementu i chcesz, aby wszystkie z nich w jakiś sposób zostały zastosowane, będziesz musiał utworzyć dodatkowe reguły CSS z połączonymi selektorami, abyś mógł dokładnie określić, co przeglądarka powinna w nich robić przypadkach. Nie mogę podać pełnego przykładu zawierającego content
właściwość tutaj, ponieważ nie jest na przykład jasne, czy symbol lub tekst powinien być na pierwszym miejscu. Ale selektor, którego potrzebujesz dla tej połączonej reguły, to albo .circle.now:before
albo .now.circle:before
- niezależnie od tego, który selektor wybierzesz, jest preferencją osobistą, ponieważ oba selektory są równoważne, jest to tylko wartośćcontent
właściwości będziesz potrzebować samodzielnie zdefiniować.
Jeśli nadal potrzebujesz konkretnego przykładu, zobacz moją odpowiedź na to podobne pytanie .
Starsza specyfikacja treści css3 zawiera sekcję dotyczącą wstawiania wielu ::before
i ::after
pseudoelementów przy użyciu notacji zgodnej z kaskadą CSS2.1, ale należy pamiętać, że ten konkretny dokument jest przestarzały - nie był aktualizowany od 2003 r. I nikt nie wdrożyła tę funkcję w ciągu ostatniej dekady. Dobra wiadomość jest taka, że porzucony dokument jest aktywnie przepisywany pod postacią css-content-3 i css-pseudo-4 . Zła wiadomość jest taka, że cecha wielu pseudoelementów nigdzie nie występuje w żadnej ze specyfikacji, prawdopodobnie z powodu braku zainteresowania implementującego.
circle
do klasynow
, jak i do klasy , obie reguły mają zastosowanie do:before
pseudoelementu elementu, ale normalny CSS implikuje, że tylko jedno zcontent
ustawień może obowiązywać (zgodnie z normalnymi regułami kaskadowymi). Chodzi o to, żecontent
się nie kumuluje.::before
ani::after
pseudo-elementów.Jeśli twój główny element ma jakieś elementy potomne lub tekst, możesz to wykorzystać.
Ustaw swój główny element względny (lub bezwzględny / ustalony) i użyj obu: przed i: po pozycjonowanym absolutnym (w mojej sytuacji musiał to być absolutny, nie wiem o twoim).
Teraz, jeśli chcesz jeszcze jednego pseudoelementu, dołącz absolut: przed jednym z dzieci elementu głównego (jeśli masz tylko tekst, umieść go w rozpiętości, teraz masz element), który nie jest względny / absolutny / ustalony .
Ten element zacznie zachowywać się tak, jakby jego właściciel był Twoim głównym elementem.
HTML
CSS
źródło
.modal:first-child:before { …
Rozwiązałem to za pomocą:
Używając rodziny czcionek „font awesome 5 free” dla ikony, a następnie musimy ponownie określić czcionkę, której używamy, ponieważ jeśli tego nie zrobimy, nawigator użyje domyślnej czcionki (razy new roman lub coś podobnego to).
źródło