Was sind die erweiterten CSS-Selektoren?

Zu den erweiterten CSS-Selektoren gehören „universeller Geschwisterselektor ~“, „Attributselektor []“, „Pseudoklassenselektor: not()“, „Pseudoklassenselektor: nth-child()“ und „Pseudoklassenselektor“. : nth-of-type()“, „Pseudoklassenselektor: erstes Kind und: letztes Kind“: 1. Universeller Geschwisterselektor, wählt alle Elemente aus, die das gleiche übergeordnete Element wie das angegebene Element haben, und alle Elemente, die das gleiche übergeordnete Element haben wie das angegebene Element Folgen Sie ihm. 2. Attributselektor, Sie können Elemente basierend auf ihren Attributwerten usw. auswählen.

Das Betriebssystem dieses Tutorials: Windows 10-System, Dell G3-Computer.

Erweiterte CSS-Selektoren bieten eine verfeinerte und flexiblere Möglichkeit, Elemente auszuwählen. Hier sind einige gängige erweiterte CSS-Selektoren:

Allgemeiner Geschwisterselektor: Verwenden Sie eine Tilde (~), um die Auswahl aller Geschwisterelemente anzuzeigen als das angegebene Element und folgen ihm unmittelbar.

1. h2 ~ p {       
           color: red;
          }

   Nach dem Login kopieren

Attributselektoren: Sie können Elemente basierend auf ihren Attributwerten auswählen.

2. Attribut existiert Selektor: [attr]
   • Gleich-Selektor: [attr=Wert]
   • Enthält Selektor: [attr~=Wert]
   • Match-Start-Selektor: [attr^=Wert]
   • Match-End-Selektor: [ attr$=value]
   • Enthält Selektor: [attr*=value]
:not() Pseudoklassenselektor: Wählt alle Elemente außer dem angegebenen Element aus.

3. p:not(.intro) {       
                   color: red;
                 }

   Nach dem Login kopieren

:nth-child() Pseudoklassenselektor: Elemente basierend auf ihrer Position im übergeordneten Element auswählen.

4. p:nth-child(odd) {       
                      background-color: lightgray;
                    }

   Nach dem Login kopieren

:nth-of-type() Pseudoklassenselektor: ähnlich wie :nth-child(), stimmt aber nur mit Elementen eines bestimmten Typs überein.

5. p:nth-of-type(2n+1) {       
                       font-weight: bold;
                      }

   Nach dem Login kopieren

:Pseudoklassenselektoren für das erste und letzte Kind: Wählen Sie das erste bzw. letzte untergeordnete Element aus.

6. div p:first-child {       
                       font-weight: bold;
                     }

   Nach dem Login kopieren
Diese erweiterten Selektoren können Entwicklern dabei helfen, Elemente auszuwählen, die präziser gestylt werden müssen, und so eine flexiblere und feinkörnigere Stilkontrolle zu erreichen.

Das obige ist der detaillierte Inhalt vonWas sind die erweiterten CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!