Najlepszy samouczek CSS pseudo-klasy W 2024 r. W tym samouczku możesz dowiedzieć się gramatyka,Klasy pseudo kotwiące,Przykłady,Pseudo-klasy i klasy CSS,CSS -: pierwsze - dziecko Pseudo-klasa,Dopasuj pierwszy <p> elementu,Przykłady,Dopasuj wszystkie elementy <p> W pierwszym elemencie <i>,Przykłady,Przykłady,CSS -: lang Pseudo-klasa,Przykłady,Więcej przykładów,Wszystko CSS Pseudoklasy / elementy,
CSS pseudo-klasy selektorów służą dodać kilka efektów specjalnych.
Pseudo-klasa składni:
Klasy CSS mogą również korzystać z pseudo-klasę:
Obsługa CSS w przeglądarkach, różnych stanu łącza mogą być wyświetlane na różne sposoby
Uwaga: Definicja CSS, A: hover muszą być umieszczone w: link oraz a: po odwiedził, jest skuteczne.
Uwaga: Definicja CSS, a: aktywny musi być umieszczany w: hover po, aby były skuteczne.
Uwaga: nazwa pseudo-klasy nie jest rozróżniana.
Pseudo-klasy mogą być używane w połączeniu z klas CSS:
Jeśli link powyżej przykładzie została odwiedził, zostanie wyświetlona na czerwono.
Można użyć: first-child Pseudo-klasa wybiera pierwszy element podrzędny
Uwaga: Musisz być zadeklarowane w poprzedniej wersji IE8 <DOCTYPE!> , Na przykład: first-child odniosły skutek.
W poniższym przykładzie, selektor pasuje do elementu <p> Podobnie jak pierwsze dziecko jakichkolwiek elementów elementów:
Pierwsza <i> w poniższym przykładzie, selektor pasuje do dowolnego elementu <p>:
: Lang Pseudo-klasa pozwala mieć możliwość dla różnych języków definiowania specjalnych zasad
Uwaga: IE8 musi zadeklarować <DOCTYPE!> W celu wsparcia; lang pseudo-klasy.
W poniższym przykładzie ,: lang typu klasy wartość atrybutu q ma definicji elementu cudzysłowach:
Dodaj różne style do hiperłączy
Ten przykład pokazuje, jak dodać inne style do hiperłączy.
Zastosowanie: koncentracja
Ten przykład pokazuje, jak używać: skupić się pseudo-klasy.
selektor | przykład | Przykład pokazuje |
---|---|---|
: zaznaczone | input:checked | Wszystkie wybrane element formularza |
: wyłączone | input:disabled | Wybierz wszystkie elementy formularza niepełnosprawnych |
: pusta | p:empty | Wybierz wszystkie elementy p nie ma dzieci |
: włączone | input:enabled | Zaznacz wszystkie odblokowane elementy formularza |
: First-of-type | p:first-of-type | Wybierz każdy element nadrzędny jest pierwszym elementem dziecko elementy p p |
W zasięgu | input:in-range | Wybierz wartości elementów w określonym przedziale |
: nieprawidłowy | input:invalid | Wybierz wszystkie elementy nieprawidłowe |
: Last-child | p:last-child | Wybierz wszystkie elementy pw ostatniego elementu podrzędnego |
: Last-of-type | p:last-of-type | Wybierz każdy element p jest ostatnim elementem elementu nadrzędnego p |
: Nie (wybór) | :not(p) | Wybierać wszystkie elementy inne niż p |
: Nth-child (n) | p:nth-child(2) | Wybierz wszystkie elementy P w drugim podelementu |
: Nth-last-child (n ) | p:nth-last-child(2) | Wybierz wszystkie elementy odwrotność p drugiego elementu podrzędnego |
: Nth-last-of-type (n) | p:nth-last-of-type(2) | Wybierz wszystkie elementy p jest odwrotnością drugiego elementu p-sub |
: Nth-of-type (n ) | p:nth-of-type(2) | Wybierz wszystkie elementy P w drugim podelementu dla p |
Only-of-type | p:only-of-type | Zaznacz wszystko to tylko element podrzędny elementów p |
Only-child | p:only-child | Zaznacz wszystko to tylko element podrzędny elementów p |
: opcjonalnie | input:optional | Wybierz "nie" wymaganego atrybutu elementu |
: Poza zasięgiem | input:out-of-range | Wybierz elementem atrybutu poza określonym zakresie wartości |
: Read-only | input:read-only | Wybierz atrybut tylko do odczytu atrybutów elementów |
: Read-write | input:read-write | Zdecydować się nie tylko do odczytu atrybut właściwości pierwiastków |
: wymagane | input:required | Wybierz "niezbędne" atrybut określa właściwości elementu |
: root | root | Wybierz element główny dokumentu |
: target | #news:target | Wybierz element, bieżącej działalności #news (kliknij na URL, który zawiera nazwę kotwicy) |
: ważna | input:valid | Zaznacz wszystkie poprawne wartości dla właściwości |
: 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 |