Reguła @scope w CSS

definicja i użycie

CSS @scope Reguła pozwala na wybór elementów w określonym poddrzewie DOM.

Dzięki tej @ regule, można dokładnie zlokalizować elementy, bez potrzeby pisania zbyt specyficznych wybieraczy.

To @ reguła zmniejsza również kowariancję wybieracza z strukturą DOM.

instancji

przykładów

Tutaj używamy dwóch niezależnych @scope Bloki do dopasowywania .ex1 klasy i .ex2 klasy z elementami <a>. :scope służy do wyboru i ustawienia stylu zakresu samego zakresu. W tym przykładzie, korzeniem zakresu jest element <div> zastosowany do klasy:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

Spróbuj sam

Zobacz poniższy HTML:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

Oto kilka zagnieżdżonych elementów <div>. Jeśli chcemy ustawić style dla elementów <h2> i <img> w części container/news, musimy napisać następujące (nie używając @scope):

Przykład 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

Spróbuj sam

Użyj @scope Zasady, pozwalają dokładnie lokalizować elementy, bez potrzeby pisania zbyt złożonych selektorów, jak poniżej:

Przykład 3

Tutaj ustawiamy .container jako korzeń zakresu zasad @scope dla elementów <h2> i <img> w komponencie .container:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Spróbuj sam

@scope Zasada zawiera jedną lub kilka zestawów zasad i może być używana na dwa sposoby:

• Jako niezależny blok CSS, w tym przypadku zawiera wstępna część, w tym korzeń zakresu i opcjonalny selektor ograniczeń zakresu – które definiują dolne i górne granice zakresu.
• Jako wewnętrzny styl w elemencie <style> HTML, w tym przypadku wstępna część jest pomijana, a zawarty zestaw zasad automatycznie działa na rodzicu elementu <style>.

Przykład 4

„Zakres donuta” dotyczy tylko elementów znajdujących się między dwoma elementami w drzewie przodka. Oto przykład:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Spróbuj sam

Gramatyka CSS

@scope (Korzeń zakresu) {
  Zestaw zasad
}

lub

/* Zakres donuta */
@scope (Korzeń zakresu) to (Ograniczenia zakresu) {
  Zestaw zasad
}

Obsługa przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę @ zasadę.