WENIGER - Elternselektoren

Lassen Sie uns in diesem Kapitel verstehen, wie Parent SelectorsArbeit. Es ist möglich, den übergeordneten Selektor mit dem zu referenzieren&(kaufmännisches Und) Operator. Übergeordnete Selektoren einer verschachtelten Regel werden durch die dargestellt& Operator und wird verwendet, wenn eine modifizierende Klasse oder Pseudoklasse auf einen vorhandenen Selektor angewendet wird.

Die folgende Tabelle zeigt die Typen der übergeordneten Auswahl -

Sr.Nr.	Typen & Beschreibung
1	Multiple & Das & repräsentiert den nächsten Selektor und auch alle übergeordneten Selektoren.
2	Auswahlreihenfolge ändern Das Voranstellen eines Selektors an die geerbten (übergeordneten) Selektoren ist nützlich, wenn die Selektorreihenfolge geändert wird.
3	Combinatorial Explosion Das & kann auch alle möglichen Permutationen von Selektoren in einer durch Kommas getrennten Liste erzeugen.

Beispiel

Das folgende Beispiel zeigt die Verwendung des übergeordneten Selektors in der WENIGER-Datei.

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Erstellen Sie als Nächstes die Datei style.less .

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Sie können die Datei style.less mit dem folgenden Befehl in style.css kompilieren :

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Im obigen Beispiel ist & bezieht sich auf Selektor a.

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der parent_selector1.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Der Operator " Übergeordnete Selektoren" hat viele Verwendungszwecke, z. B. wenn Sie die Selektoren der verschachtelten Regel auf andere als die Standardart kombinieren müssen. Eine andere typische Verwendung von&ist es, Klassennamen wiederholt zu generieren. Für weitere Informationen klicken Sie hier .