MNIEJ - Selektory nadrzędne

W tym rozdziale zrozumiemy, jak to zrobić Parent Selectorspraca. Możliwe jest odwołanie się do selektora nadrzędnego przy użyciu&(znak ampersand). Selektory nadrzędne reguły zagnieżdżonej są reprezentowane przez& operator i jest używany podczas stosowania modyfikującej klasy lub pseudoklasy do istniejącego selektora.

W poniższej tabeli przedstawiono typy selektora nadrzędnego -

Sr.No.	Rodzaje i opis
1	Wiele & Plik & będzie reprezentować najbliższy selektor, a także wszystkie selektory nadrzędne.
2	Zmiana kolejności selektorów Dołączanie selektora na początek do selektorów dziedziczonych (nadrzędnych) jest przydatne, gdy zmienia się kolejność selektorów.
3	Combinatorial Explosion Plik & może również utworzyć wszystkie możliwe permutacje selektorów na liście oddzielonej przecinkami.

Przykład

Poniższy przykład demonstruje użycie selektora rodzica w pliku LESS -

<!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>

Następnie utwórz plik style.less .

bezszyjkowy

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

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

W powyższym przykładzie & odnosi się do selektora a.

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod HTML w pliku parent_selector1.htm plik.
Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Selektorów Parent operator ma wiele zastosowań, takich jak, kiedy trzeba połączyć selektorów zagnieżdżonego regule w inny sposób niż domyślny. Inne typowe użycie&polega na wielokrotnym generowaniu nazw klas. Aby uzyskać więcej informacji, kliknij tutaj .