CSS @scope sääntö

Definition and usage

CSS @scope The rule allows you to select elements within a specific DOM subtree.

With this @ rule, you can precisely locate elements without writing overly specific selectors.

This @ rule also reduces the coupling between the selector and the DOM structure.

Instance

Example 1

Here, we use two independent @scope Block to match <a> elements in .ex1 and .ex2 classes. :scope is used to select and set the style of the scope itself. In this example, the scope root is the <div> element that has applied the class:

@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;
  }
}

Kokeile itse

Tarkastele seuraavaa HTML:ää:

<div class="container">
  <div class="news">
    <h2>Jotakin otsikkoa</h2>
    <img src="example.jpg" alt="Jotakin kuvaa">
  </div>
</div>

Tässä on joitakin sisäkkäisiä <div>-elementtejä, jos haluamme asettaa tyylit yllä olevan container/news-osan <h2> ja <img>-elementeille, meidän täytyy kirjoittaa seuraavaa (ilman @scope):

Esimerkki 2

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

Kokeile itse

Käytä @scope Säännöillä voit tarkasti sijoittaa elementtejä, ilman että sinun täytyy kirjoittaa liian monimutkaisia valitsijoita, kuten seuraavassa:

Esimerkki 3

Tässä me asetamme vain .container-komponentin sisällä olevat <h2> ja <img>-elementit @scope-säännön juuritoimialaksi:

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

Kokeile itse

@scope Säännöt sisältävät yhden tai useamman sääntöryhmän ja voidaan käyttää kahdella tavalla:

• CSS:n itsenäisenä lohkona, tässä tapauksessa se sisältää johtavan osan, joka sisältää toimialan juurin ja valinnaisen toimialan rajoitusten valitsimen - nämä määrittelevät toimialan ylä- ja alarajat.
• HTML:n <style>-elementin sisällä olevana sisäänrakennettuna tyylinä, tässä tapauksessa johtava osa jätetään pois, ja sisältämä sääntöryhmä vaikuttaa automaattisesti <style>-elementin isäntälle.

Esimerkki 4

"Makea-juuri toimiala" koskee vain elementtejä, jotka sijaitsevat kaksi elementtiä vanhemmillaan sukupuussa. Tämä on esimerkki:

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

Kokeile itse

CSS-grammatiikka

@scope (Toimialan juuri) {
  Sääntöryhmä
}

tai

/* Makea-juuri toimiala */
@scope (Toimialan juuri) to (Toimialan rajoitukset) {
  Sääntöryhmä
}

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan @-säännön selaimen version.