Heim  >  Artikel  >  Was sind die erweiterten CSS-Selektoren?

Was sind die erweiterten CSS-Selektoren?

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌Original
2023-12-04 09:56:521297Durchsuche

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.

Was sind die erweiterten CSS-Selektoren?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;
           }
    Attributselektoren: Sie können Elemente basierend auf ihren Attributwerten auswählen.
  1. 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]
  2. :not() Pseudoklassenselektor: Wählt alle Elemente außer dem angegebenen Element aus.
  3. p:not(.intro) {       
                    color: red;
                  }
:nth-child() Pseudoklassenselektor: Elemente basierend auf ihrer Position im übergeordneten Element auswählen.
  1. p:nth-child(odd) {       
                       background-color: lightgray;
                     }
:nth-of-type() Pseudoklassenselektor: ähnlich wie :nth-child(), stimmt aber nur mit Elementen eines bestimmten Typs überein.
  1. p:nth-of-type(2n+1) {       
                        font-weight: bold;
                       }
:Pseudoklassenselektoren für das erste und letzte Kind: Wählen Sie das erste bzw. letzte untergeordnete Element aus.
  1. div p:first-child {       
                        font-weight: bold;
                      }
  2. 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

In Verbindung stehende Artikel

Mehr sehen