CSS-Pseudo-Klassen
CSS Pseudo-Klassen-Selektoren werden verwendet, um einige Spezialeffekte hinzuzufügen.
Grammatik
Pseudo-Klasse Syntax:
CSS-Klassen können auch Pseudo-Klasse verwenden:
Anker Pseudoklassen
CSS-Unterstützung in Browsern, unterschiedlichen Zustand der Verbindung kann auf unterschiedliche Weise angezeigt werden
Beispiele
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Versuchen »
Hinweis: CSS - Definition, a: link und: a: Hover muss in einem platziert werden , nachdem besuchte, wirksam ist.
Hinweis: CSS Definition a: aktiv muss in a gesetzt werden: Hover nach, um wirksam zu sein.
Hinweis: Der Name derPseudo-Klasse wird nicht zwischen Groß- und Kleinschreibung.
Pseudo-Klassen und CSS-Klassen
Pseudo-Klassen können in Verbindung mit CSS-Klassen verwendet werden:
<a class="red" href="css-syntax.html"> CSS Syntax </a>
Wenn der Link obigen Beispiel wurde besucht, wird sie in rot angezeigt.
CSS -: erste - Kind Pseudo-Klasse
Sie können die Verwendung: first-child Pseudo-Klasse das erste Kind Element wählt
Hinweis: Sie müssen in der vorherigen Version von IE8 deklariert werden <! DOCTYPE> , So: first-child zu übernehmen.
Passen Sie die erste Element <p>
Im folgenden Beispiel stimmt der Wähler das Element <p> als erstes Kind eines Elements Elemente:
Beispiele
<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>
Versuchen »
Spiel alle <p> Elemente in der ersten <i> -Element
Die erste <i> Element in dem folgenden Beispiel entspricht der Selektor jedes Element <p>:
Beispiele
<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>
Versuchen »
<H2 Spiel alle als erstes untergeordnetes Element des <p> Element in allen <i> Elemente:
Beispiele
<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>
Versuchen »
CSS -: lang Pseudo-Klasse
: Lang Pseudo-Klasse ermöglicht es Ihnen, die Möglichkeit haben, für verschiedene Sprachen spezielle Regeln definieren
Hinweis: IE8 muss erklären <! DOCTYPE> Zur Unterstützung; lang Pseudo-Klasse.
Im folgenden Beispiel ,: lang Klassentyp Attributwert von q keine Elementdefinitionen Zitate:
Beispiele
<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>
Versuchen »
Weitere Beispiele
In verschiedenen Stilen Hyperlinks
Dieses Beispiel zeigt, wie andere Stile zu Hyperlinks hinzuzufügen.
Verwendung: Fokus
Dieses Beispiel zeigt, wie die Anwendung: Pseudo-Klasse konzentrieren.
Alle CSS-Pseudoklassen / Elemente
| Wähler | Beispiel | Beispiel zeigt, |
|---|---|---|
| ausgewählt | input:checked | Alle ausgewählten Formularelement |
| : Behinderte | input:disabled | Wählen Sie alle deaktivierten Formularelemente |
| : leer | p:empty | Wählen Sie alle p Elemente haben keine Kinder |
| : aktiviert | input:enabled | Wählen Sie alle aktivierten Formularelemente |
| : First-of-Art | p:first-of-type | jedes Elternelement Wählen Sie ist die erste p p Elemente untergeordnetes Element |
| : In-Bereich | input:in-range | Wählen Sie die Elementwerte innerhalb eines bestimmten Bereichs |
| : ungültige | input:invalid | Wählen Sie alle ungültigen Elemente |
| : Last-child | p:last-child | Wählen Sie alle p Elemente in dem letzten Kind-Element |
| : Last-of-Art | p:last-of-type | Wählen Sie jedes Element p ist das letzte Element eines übergeordneten Elements p |
| : Nicht (Selector) | :not(p) | Wählen Sie alle Elemente außer dem p |
| : N - te-Kind (n) | p:nth-child(2) | Wählen Sie alle p Elemente in dem zweiten Teilelement |
| : N - te-last-Kind (n ) | p:nth-last-child(2) | Wählen Sie alle Elemente der inversen von p zweites Kind Element |
| : N - te-last-of-Typ (n) | p:nth-last-of-type(2) | Auswählen aller p Elementen ist der Kehrwert des zweiten Teilelements p |
| : Nth-of-Typ (n ) | p:nth-of-type(2) | Wählen Sie alle p Elemente in dem zweiten Teilelement für den p |
| : Nur-of-Art | p:only-of-type | Wählen Sie die alle nur ein untergeordnetes Element von p-Elemente |
| : Nur-Kind | p:only-child | Wählen Sie die alle nur ein untergeordnetes Element von p-Elemente |
| : optional | input:optional | Wählen Sie nicht "erforderlich" Attribut des Elements |
| : Out-of-Range | input:out-of-range | Wählen Sie Attributelement außerhalb des angegebenen Bereichs von Werten |
| read-only: | input:read-only | Wählen Sie das Schreibschutz-Attribut der Elementattribute |
| : Read-write | input:read-write | Wählen Sie nicht zu schreibgeschützte Attribut der Elementeigenschaften |
| : erforderlich | input:required | Wählen Sie "erforderlich" Attribut gibt die Elementeigenschaften |
| : root | root | Wählen Sie das Stammelement des Dokuments |
| : Ziel | #news:target | Wählen Sie die aktuelle Aktivität #news Element (klicken Sie auf eine URL, die den Namen des Ankers enthält) |
| : gültig | input:valid | Wählen Sie alle gültigen Werte für Eigenschaften |
| : link | a:link | Wählen Sie alle nicht besuchte Links |
| : visited | a:visited | Wählen Sie alle besuchten Links |
| : aktiv | a:active | Select ist ein aktiver Link |
| : Hover | a:hover | Setzen Sie die Maus auf den Link Status |
| : Fokus | input:focus | Nachdem das Eingangselement ausgewählt hat Fokus |
| : First-letter | p:first-letter | Wählen Sie den ersten Buchstaben jedes Element <p> |
| : First-line | p:first-line | Wählen Sie die erste Zeile jedes Element <p> |
| : First-child | p:first-child | <] P> Elementselektoreinrichtung passt auf jedes Element mit dem ersten Kind-Element gehört, |
| : vor | p:before | Legen Sie Inhalt vor jedem Element <p> |
| : nach | p:after | Inhalt einfügen nach jedem Element <p> |
| : Lang (Sprache) | p:lang(it) | Attribut lang Auswahl <p> Element auf einen Startwert |