Verschiedene Arten von CSS3-Selektoren

Es gibt viele Arten von CSS3-Selektoren, die Elemente basierend auf verschiedenen Elementattributen, strukturellen Beziehungen oder Zuständen auswählen können. Im Folgenden werden einige häufig verwendete CSS3-Selektortypen vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Basisselektor:

• Elementselektor: Verwenden Sie den Elementnamen als Selektor, hier ist das p-Element als Beispiel:

  p {
    color: red;
  }

• Klassenselektor: Verwenden Sie den Klassennamen als Selektor, beginnend mit. , Nehmen Sie hier das Element, dessen Klasse „Beispiel“ ist:

  .example {
    font-size: 16px;
  }

• ID-Selektor: Verwenden Sie ID als Selektor, beginnend mit #. Nehmen Sie hier das Element, dessen ID „Titel“ ist, als Beispiel:

  #title {
    font-weight: bold;
  }

2. Attributauswahl:

• [attr]: Wählen Sie Elemente mit angegebenen Attributen aus, hier nehmen Sie das Element mit Datenattribut als Beispiel:

  [data] {
    background-color: yellow;
  }

• [attr=Wert]: Wählen Sie hier Elemente mit angegebenen Attributen und Werten aus Nehmen Sie den Datenattributwert Nehmen Sie das Beispielelement:

  [data="example"] {
    color: blue;
  }

• [attr^=value]: Wählen Sie Elemente aus, deren Attributwerte mit dem angegebenen Wert beginnen. Nehmen Sie hier das Element, dessen Datenattributwert mit beginnt „test“ als Beispiel:

  [data^="test"] {
    text-decoration: underline;
  }

3. Strukturselektor:

• :nth-child(n): Wählen Sie das n-te untergeordnete Element des übergeordneten Elements aus als Beispiel:

  .parent :nth-child(3) {
    background-color: green;
  }

• :first-child : Wählen Sie das erste untergeordnete Element des übergeordneten Elements aus. Hier nehmen wir das erste untergeordnete Element des übergeordneten Elements als Beispiel:

  .parent :first-child {
    font-style: italic;
  }

4. Pseudoklassenselektor:

• :hover: Wählen Sie das Element aus, wenn die Maus darüber schwebt. Der Status des Elements. Hier ist ein Beispiel für die Änderung der Hintergrundfarbe, wenn der Mauszeiger darüber bewegt wird:

  .example:hover {
    background-color: orange;
  }

• :aktiv: Wählen Sie den Status aus, wenn der Element aktiviert ist, hier ist ein Beispiel für die Änderung der Textfarbe, wenn auf das Element geklickt wird:

  .example:active {
    color: purple;
  }

Das Obige ist einige Typen und Codebeispiele von CSS3-Selektoren, die Entwicklern dabei helfen können, den Stil von Elementen flexibler auszuwählen und zu steuern die Seite. Durch die Beherrschung dieser Selektoren können Sie die Effizienz der Seitenentwicklung und das Benutzererlebnis effektiv verbessern.

Das obige ist der detaillierte Inhalt vonVerschiedene Arten von CSS3-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!