Wie man mit Pseudoklassen arbeitet

Unser Support Team ist bereit Ihnen ein neues Tutorial zu präsentieren, dass Ihnen zeigt, wie man mit Pseudoklassen in CSS Regeln arbeitet. Die Pseudoklasse wird verwendet, um einen spezifischen Zustand eines Elements zu definieren, z. B. ‘hover’ (Zustände für mouseover), ‘focus’ oder ‘active’.Sie können sich diesen Link für eine mehr ausführliche Beschreibung ansehen. Um mit ihnen zu arbeiten, folgen Sie bitte der Anleitung, unten angegeben:

1. Öffnen Sie die Seite und drücken Sie die Taste F12, um das Tool Firebug (oder einen anderen Inspector) zu öffnen. Auf der folgenden Seite erfahren Sie mehr über die Verwendung von Inspektorwerkzeugen .

2. Suchen Sie nach dem Element, für das Sie das Styling definieren möchten. Um dies zu tun, aktivieren Sie den Inspector, indem Sie das Icon oben links im Firebug-Fenster (1) drücken und klicken Sie auf das Element Ihrer Seite , um es zu überprüfen (2):

   

   Alternativ können Sie mit der rechten Maustaste auf das gewünschte Element klicken und ‘Inspect with Firebug’ (oder ‘Inspect’ für andere Tools) wählen.

3. Auf der rechten Seite sehen Sie die Stile, die zu diesem Element in seinem regulären Zustand angewendet werden. Wählen Sie eine Pseudoklasse, indem Sie auf den kleinen Pfeil oben in der Liste Styles klicken, um die Stilregeln mit angewandten Pseudoklassen anzuzeigen:

   

4. Nun können Sie die Stile des Elements in den restlichen Zuständen sehen, zum Beispiel auf hover. Auf diese Weise können Sie eine neue Farbe für Schaltflächen definieren, die Skalierung ändern usw. Fühlen Sie sich frei, den Code zu ändern, der den Eigenschaftswert bestimmt, z. B. die Farbe oder den Hintergrund und fügen Sie !important vor dem ; Symbol am Ende der Zeile hinzu. Sie können sich das folgende Beispiel ansehen:

   Die ursprüngliche Regel (sie definiert die weiße Linkfarbe auf hover):

   			.entry-content a:hover {
   				color: #ffffff;
   			}
   		

   Ihre geänderte Regel (es ändert die Frabe für den gleichen Link zu #123456 auf hover):

   			.entry-content a:hover {
   				color: #123456 !important;
   			}			
   		

5. Auf diese Weise können Sie jede beliebige css-Eigenschaft definieren, die Sie benötigen. Wenn Sie mit dem Anpassen der Regelparameter fertig sind, kopieren Sie diese neue Regel an das Ende Ihrer .css-Datei (sie kann als style.css, template.css, global.css usw. bezeichnet werden). Überprüfen Sie Ihre Webseite nach der Anwendung der Änderungen. In einigen Fällen können Sie den ursprünglichen Code direkt bearbeiten, in diesem Fall ist das Hinzufügen der ‘!important’ Anweisung nicht unbedingt erforderlich.

Das ist alles, jetzt wissen Sie, wie man Pseudoklassen in CSS verwaltet.

Sie können sich gerne unser ausführliches Video Tutotial ansehen: