CSS pseudo-klasy
CSS pseudo-klasy selektorów służą dodać kilka efektów specjalnych.
gramatyka
Pseudo-klasa składni:
Klasy CSS mogą również korzystać z pseudo-klasę:
Klasy pseudo kotwiące
Obsługa CSS w przeglądarkach, różnych stanu łącza mogą być wyświetlane na różne sposoby
Przykłady
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Spróbuj »
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 i klasy CSS
Pseudo-klasy mogą być używane w połączeniu z klas CSS:
<a class="red" href="css-syntax.html"> CSS Składnia </a>
Jeśli link powyżej przykładzie została odwiedził, zostanie wyświetlona na czerwono.
CSS -: pierwsze - dziecko Pseudo-klasa
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.
Dopasuj pierwszy <p> elementu
W poniższym przykładzie, selektor pasuje do elementu <p> Podobnie jak pierwsze dziecko jakichkolwiek elementów elementów:
Przykłady
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Spróbuj »
Dopasuj wszystkie elementy <p> W pierwszym elemencie <i>
Pierwsza <i> w poniższym przykładzie, selektor pasuje do dowolnego elementu <p>:
Przykłady
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Spróbuj »
<H2 Mecz wszystkim jako pierwszego elementu podrzędnego elementu <p> Wszystko <i> elementy:
Przykłady
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Spróbuj »
CSS -: lang Pseudo-klasa
: 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:
Przykłady
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Spróbuj »
Więcej przykładów
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.
Wszystko CSS Pseudoklasy / elementy
| 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 |