CSS @scope regeln

Definition och användning

CSS @scope Regeln tillåter dig att välja element i en specifik DOM-understruktur.

Genom denna @-regel kan du exakt lokaliserar element utan att behöva skriva för specifika väljare.

Denna @-regel minskar också kopplingen mellan väljare och DOM-strukturen.

exempel

exempel 1

Här använder vi två oberoende @scope Block för att matcha .ex1-klass och .ex2-klassens <a>-element. :scope används för att välja och ställa in stilen för skalan själv. I detta exempel är skalan roten till den <div>-element som har tillämpat klassen:

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

Prova själv

Se följande HTML:

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

Här finns några nästlade <div>-element. Om vi vill sätta stil på <h2> och <img>-elementen inom container/news-delen, måste vi skriva följande (utan @scope):

Exempel 2

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

Prova själv

Använd @scope Regler, du kan exakt lokalisera element utan att behöva skriva för komplexa selektorer, som följande:

Exempel 3

Här sätter vi .container-komponenten som ro-användningsområde för @scope-regeln för <h2> och <img>-elementen inom .container:

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

Prova själv

@scope Regeln innehåller en eller flera regeluppsättningar och kan användas på två sätt:

• Som en självständig block i CSS, där det innehåller en inledande del som inkluderar användningsområdebasen och valfria användningsområdebegränsningsselektorer - dessa definierar användningsområdets övre och nedre gränser.
• Som inline-style inom <style>-elementet i HTML, där det inledande delas ut och innehållande regeluppsättningen tillämpas automatiskt på föräldrelementet till <style>-elementet.

Exempel 4

"甜甜圈 användningsområde" gäller endast för element som finns mellan två element i ancessträdet. Detta är ett exempel:

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

Prova själv

CSS-språk

@scope (Användningsområdebas) {
  Regeluppsättning
}

eller

/*甜甜圈作用域*/
@scope (Användningsområdebas) to (Användningsområdebegränsning) {
  Regeluppsättning
}

Webbläsarstöd

Siffrorna i tabellen representerar den första webbläsarversion som helt stöder denna @-regel.