Was ist ein Pseudoklassenselektor in CSS? Eine kurze Einführung in Pseudoklassenselektoren

In diesem Kapitel erfahren Sie, was ein Pseudoklassenselektor in CSS ist. Eine kurze Einführung in Pseudoklassenselektoren. Lassen Sie alle die Rolle von Pseudoklassenselektoren in CSS, die Klassifizierung von CSS-Pseudoklassenselektoren und anderes Wissen verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. (Verwandte Empfehlungen: „CSS-Tutorial“)

1. Einführung in Pseudoklassenselektoren

Der Pseudoklassenselektor (bezeichnet als: Pseudoklasse) wird durch einen Doppelpunkt definiert, der den Status des Elements definiert, z. B. „Klick gedrückt“, „Klick abgeschlossen“ usw. Die Pseudoklasse kann dazu verwendet werden Ändern Sie den Stil des Elementstatus.

Die Funktion der Pseudoklasse ähnelt dem Elementstil im allgemeinen DOM, ändert jedoch im Gegensatz zum Elementstil im allgemeinen DOM keinen DOM-Inhalt. Es werden lediglich einige geänderte Elemente eingefügt, die für den Benutzer sichtbar, für das DOM jedoch unsichtbar sind. Der Effekt einer Pseudoklasse kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden.

Was sind Pseudoklassen?

Es handelt sich um die integrierte Klasse von CSS selbst, die ihr einige Features und Funktionen verleiht, das heißt, Sie benötigen keine Klasse= ... oder id=... Sie können es natürlich auch direkt verwenden, z. B.: a:link{color:#FF0000;}

2. Pseudoklassenselektor Die Klassifizierung von

Pseudoklassenselektoren kann hauptsächlich unterteilt werden in: dynamische Pseudoklassenselektoren, UI-Elementstatus-Pseudoklassenselektoren, strukturelle Pseudoklassenselektoren und negative Pseudoklassenselektoren.

Die Selektorsyntax dieser Kategorien wird im Folgenden ausführlich vorgestellt:

1. Dynamische Pseudoklassen-Selektorsyntax

• E: Link (Link-Pseudoklassenselektor): Wählt das passende E-Element aus, und das passende Element wird als Hyperlink definiert und wurde nicht besucht. Wird häufig an Link-Zeichnungspunkten verwendet.

• E:visited (Link-Pseudoklassenselektor): Wählt passende E-Elemente aus, und die passenden Elemente werden mit Hyperlinks definiert und wurden besucht. Wird häufig an Link-Zeichnungspunkten verwendet.

• E:aktiv (Benutzerverhaltensauswahl): Wählen Sie das passende E-Element aus, und das passende Element wird aktiviert. Wird häufig für Linkstriche und Schaltflächen verwendet.

• E:hover (Benutzerverhaltensauswahl): Wählen Sie das passende E-Element aus, und die Maus des Benutzers bleibt auf dem Element E. IE6 und niedrigere Browser unterstützen nur a:hover

• E:focus (Benutzerverhaltensauswahl): Wählen Sie das passende E-Element aus, und das passende Element erhält den Fokus

Dynamischer Pseudoklassenselektor kann bei der Anwendung eines Hyperlinks auf ein Tag verwendet werden:

Ein Tag hat 4 Pseudoklassen (entsprechend vier Zuständen), wie folgt:

• :link „Link“: Bevor auf den Hyperlink geklickt wurde

• :visited „Besucht“: Nachdem der Link besucht wurde

• :hover „Hover“: Wenn die Maus auf dem Etikett platziert wird

• :active „Aktivieren“: Wenn die Maus auf das Etikett klickt, aber nicht loslässt.

Codebeispiel:

/*让超链接点击之前是红色*/
a:link {color: red;}

/*让超链接点击之后是橙色*/
a:visited {color: orange;}

/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}

/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}

Es gibt eine bestimmte Reihenfolge für diese vier Pseudoklassenselektoren des a-Tags. Die Reihenfolge zwischen den einzelnen Stilen ist einmalig Angezeigte Anordnungsfehler können zum Überschreiben führen und dazu führen, dass einer der Stile nicht angezeigt werden kann. Wie müssen diese vier Pseudoklassenselektoren des a-Tags sortiert werden, bevor sie verwendet werden können?

In der CSS-Definition muss a:hover nach a:link und a:visited platziert werden, um wirksam zu sein, und a:active muss nach a:hover platziert werden, um wirksam zu sein.

Die Reihenfolge der vier Pseudoklassenselektoren des a-Tags lautet also: a:link, a:visited, a:hover, a:active

2.UI Elemente Status-Pseudoklassenselektor

• E:checked (Pseudoklassenselektor mit aktiviertem Status): Entspricht dem ausgewählten Kontrollkästchen- oder Optionsfeld-Formularelement

• E:enabled (Pseudoklassenselektor mit aktiviertem Status): Entspricht allen aktivierten Formularelementen.

• E:disabled (Pseudoklassenselektor mit deaktiviertem Status): Entspricht allen deaktivierten Formularen Elemente

Der UI-Elementstatus-Pseudoklassenselektor wird hauptsächlich zum Bearbeiten des Form-Elements in HTML verwendet. Am häufigsten ist unser „type="text" mit „enable“ und „There“ ausgestattet Es gibt zwei Zustände: „deaktiviert“, ersterer ist beschreibbar und letzterer ist nicht verfügbar; außerdem haben „type="radio" und „type="checkbox"“ zwei Zustände: „aktiviert“ und „nicht aktiviert“. Schauen wir uns zwei Beispiele an. Wenn Sie beispielsweise das Textfeld „deaktiviert“ von anderen Textfeldern unterscheiden möchten, können Sie es wie folgt verwenden:

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

Hinweis: IE6-8 unterstützt „:checked“ nicht ", ":enabled", ":disabled" sind die drei Selektoren.

3. Struktureller Pseudoklassenselektor

• E:fisrt-child: Element E als erstes untergeordnetes Element des übergeordneten Elements. Entspricht E:nth-child(1)

• E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同    

• E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同    

• E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.    

• E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同    

• E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素    

• E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素    

• E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同    

• E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同    

• E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素    

• E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素    

• E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点    

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child;

它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：

结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

Das obige ist der detaillierte Inhalt vonWas ist ein Pseudoklassenselektor in CSS? Eine kurze Einführung in Pseudoklassenselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!