Was sind die am häufigsten verwendeten Selektoren in CSS3?

CSS3 verfügt über viele Selektoren zum Auswählen und Positionieren von HTML-Elementen. Im Folgenden werden einige häufig verwendete CSS3-Selektoren vorgestellt und entsprechende Codebeispiele bereitgestellt.

1. Elementselektor:
   Der Elementselektor ist der einfachste und am häufigsten verwendete Selektor, der zum Auswählen von Elementen in HTML-Dokumenten verwendet wird. Hier ist ein Codebeispiel mit dem Elementselektor:

   p {
     color: red;
   }

   Nach dem Login kopieren

   Der obige Code wählt alle

   -Elemente aus und setzt ihre Textfarbe auf Rot.

2. Klassenselektor:
   Der Klassenselektor wird verwendet, um Elemente mit demselben Klassennamen auszuwählen. Sie müssen den entsprechenden Klassennamen zum Klassenattribut des HTML-Elements hinzufügen und mit einem Punkt „.“ beginnen. Hier ist ein Codebeispiel mit einem Klassenselektor:

   .highlight {
     background-color: yellow;
   }

   Nach dem Login kopieren

   Der obige Code wählt alle Elemente mit dem Klassennamen „highlight“ aus und setzt ihre Hintergrundfarbe auf Gelb.

3. ID-Selektor:
   Der ID-Selektor wird verwendet, um Elemente mit derselben ID auszuwählen. Sie müssen die entsprechende ID zum ID-Attribut des HTML-Elements hinzufügen und mit dem Nummernzeichen „#“ beginnen. Hier ist ein Codebeispiel mit dem ID-Selektor:

   #logo {
     width: 200px;
     height: 100px;
   }

   Nach dem Login kopieren

   Der obige Code wählt das Element mit der ID „Logo“ aus und legt seine Breite auf 200 Pixel und seine Höhe auf 100 Pixel fest.

4. Attributselektor:
   Der Attributselektor wird verwendet, um Elemente mit bestimmten Attributen auszuwählen. Die Auswahl kann auf der Grundlage des Vorhandenseins, des Werts usw. von Attributen erfolgen. Im Folgenden finden Sie Codebeispiele für einige gängige Attributselektoren:

   • Elemente mit angegebenen Attributen auswählen:

     input[type="text"] {
     border: 1px solid black;
     }

     Nach dem Login kopieren

     Der obige Code bedeutet, alle -Elemente mit dem Typattribut „Text“ auszuwählen und ihre Ränder zu ändern 1 Pixel durchgezogene schwarze Linie.

   • Wählen Sie Elemente aus, die mit dem angegebenen Attributwert beginnen, enden oder eine bestimmte Zeichenfolge enthalten:

     a[href^="https"] {
     color: blue;
     }

     Nach dem Login kopieren

     Der obige Code bedeutet, alle Elemente auszuwählen, deren href-Attributwerte mit „https“ beginnen, und ihren Text festzulegen Farbe zu Blau.

5. Pseudoklassenselektor:
   Pseudoklassenselektor wird verwendet, um einen bestimmten Zustand oder eine bestimmte Position eines Elements auszuwählen. Im Folgenden finden Sie Codebeispiele für einige häufig verwendete Pseudoklassenselektoren:

   • Wählen Sie das erste untergeordnete Element aus:

     ul li:first-child {
     font-weight: bold;
     }

     Nach dem Login kopieren

     Der obige Code bedeutet, dass das erste

   • -untergeordnete Element ausgewählt wird. und ihre Schriftart ist fett.

   • Mouse-Over-Elemente auswählen:

     a:hover {
     text-decoration: underline;
     }

     Nach dem Login kopieren

     Der obige Code wählt alle Mouse-Over-Elemente aus und fügt eine Unterstreichung unter ihrem Text hinzu.

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Selektoren in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!