CSS @scope reglen

Definition og brug

CSS @scope Reglen giver dig mulighed for at vælge elementer i en bestemt DOM-undertræ.

Med denne @-regel kan du præcist定位 elementer uden at skrive for specifikke vælger.

Denne @-regel reducerer også kovaliteten mellem vælgeren og DOM-strukturen.

eksempel

eksempel 1

Her bruger vi to uafhængige @scope Brug af blokke til at matche <a> elementer i klasserne .ex1 og .ex2. :scope bruges til at vælge og sætte stilen på selve scopet. I dette eksempel er scopets rod et <div>-element, der har klassen anvendt:

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

Prøv det selv

Se følgende HTML:

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

Her er nogle indlejrede <div>-elementer, hvis vi vil sætte stil på <h2> og <img>-elementerne i container/news-sektionen, skal vi skrive følgende (uden @scope):

Eksempel 2

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

Prøv det selv

Brug @scope Regler, så kan du præcist定位 elementer uden at skrive for komplekse vælger, som vist her:

Eksempel 3

Her sætter vi .container som rod for @scope-regelens anvendelsesområde kun for <h2> og <img>-elementer i .container-komponenten:

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

Prøv det selv

@scope Reglen indeholder en eller flere regelsæt og kan bruges på to måder:

• Som en uafhængig blok i CSS, hvor den indeholder en indledende del, der inkluderer anvendelsesområdets rod og valgfri begrænsning af anvendelsesområdet vælger - disse definerer anvendelsesområdets øvre og nedre grænser.
• Som en inline stil i HTML's <style> element, hvor den indledende del udelades, og den indeholdte regelsæt anvendes automatisk på <style>-elementets forældreelement.

Eksempel 4

"Søde rings anvendelsesområde" gælder kun for elementer mellem to elementer i slægtetræet. Dette er et eksempel:

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

Prøv det selv

CSS syntaks

@scope (Anvendelsesområdets rod) {
  Regelsæt
}

eller

/* Søde rings anvendelsesområde */
@scope (Anvendelsesområdets rod) til (Begrænsning af anvendelsesområde) {
  Regelsæt
}

Browserunderstøttelse

Tallene i tabellen repræsenterer den første browserversion, der fuldt ud understøtter denne @ regel.