Najlepszy samouczek CSS pseudoelementy W 2024 r. W tym samouczku możesz dowiedzieć się gramatyka,: First-line pseudo-element,Przykłady,: First-letter pseudoelement,Przykłady,Pseudoelementy i klasy CSS,Wiele Pseudoelementy,Przykłady,CSS -: Przed pseudoelementem,Przykłady,CSS -: po pseudoelementem,Przykłady,Wszystko CSS Pseudoklasy / elementy,
CSS pseudoelement służy dodać kilka efektów specjalnych selektorów.
Pseudo-element składni:
Klasy CSS mogą również korzystać z pseudo-elementy:
"Pierwsza linia" pseudo-element służy do utworzenia specjalnego stylu do pierwszej linii tekstu.
W poniższym przykładzie, przeglądarka będzie opierać się na "pierwszej linii" pseudoelementem w stylu pierwszej linii tekstu formatu elementy p:
Uwaga: "pierwszego rzutu" pseudo-element może być używany tylko do elementów blokowych.
UWAGA: Następujące właściwości mogą być stosowane do "pierwszego rzutu" pseudo-elementu:
"Pierwsza litera" pseudo-element służy do utworzenia specjalnego stylu pierwszej literze tekstu:
Uwaga: "first-letter" pseudo-element może być używany tylko do elementów blokowych.
UWAGA: Następujące właściwości mogą być stosowane do "first-letter" pseudo-elementu:
Pseudoelementy można łączyć z klas CSS
Powyższy przykład sprawi, że wszystkie klasy jako pierwsza litera artykule ustęp zmienia kolor na czerwony.
Wiele pseudoelementów mogą być łączone w celu użycia.
W poniższym przykładzie, pierwszy akapit listu będzie wyświetlany w kolorze czerwonym, rozmiar czcionki jest xx-large. Pierwsza linia reszty tekstu będzie niebieskie, a małe litery kapitałowych.
Pozostałe ustępy tekstu w domyślny rozmiar czcionki i koloru do wyświetlania:
": Przed" pseudo-element można wstawić nową zawartość w przedniej części zawartości tego elementu.
Poniższy przykład aby wstawić obraz z przodu każdego elementu <h1>:
"Po" pseudo-element można wstawić nową treść po zawartości elementu.
Poniższe przykłady wstawić obraz po każdym elemencie <h1>:
selektor | przykład | Przykład pokazuje |
---|---|---|
: link | a:link | Zaznacz wszystkie linki nieodwiedzonych |
: visited | a:visited | Zaznacz wszystkie odwiedzonych linków |
: aktywny | a:active | Select jest aktywnym linkiem |
: hover | a:hover | Umieść kursor myszy na stan łącza |
koncentrująca | input:focus | Po wybraniu elementu wejściowego ma fokus |
: First-letter | p:first-letter | Wybierz pierwszą literę każdego elementu <p> |
: First-line | p:first-line | Wybierz pierwszą linię każdego elementu <p> |
: First-child | p:first-child | <] P> selektor elementu dopasowuje dowolny pierwiastek należący do pierwszego elementu podrzędnego |
: przed | p:before | Wstaw zawartość przed każdym elemencie <p> |
: po | p:after | Wstaw zawartość po każdym <p> Element |
: Lang (język) | p:lang(it) | Wybór atrybutu lang <p> element wartości początkowej |