规则 CSS @scope

定义和用法

CSS @scope 规则允许您选择特定 DOM 子树中的元素。

通过此 @ 规则，您可以精确地定位元素，而无需编写过于具体的选择器。

此 @ 规则还减少了选择器与 DOM 结构之间的耦合。

实例

例子 1

在这里，我们使用两个独立的 @scope 块来匹配 .ex1 类和 .ex2 类中的 <a> 元素。:scope 用于选择和设置作用域根本身的样式。在此示例中，作用域根是应用了类的 <div> 元素：

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

Coba sendiri

Lihat HTML berikut:

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

Di sini ada beberapa elemen <div> yang terdapat, jika kami ingin menetapkan gaya untuk <h2> dan <img> elemen di bagian container/news di atas, maka harus menulis seperti berikut (tanpa @scope):

Contoh 2

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

Coba sendiri

Dengan @scope Aturan, Anda dapat menempatkan elemen dengan akurasian tanpa menulis pemilih yang terlalu kompleks, seperti berikut:

Contoh 3

Di sini, kami hanya menentukan .container komponen untuk <h2> dan <img> elemen, mengatur .container sebagai akar lingkungan aturan @scope:

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

Coba sendiri

@scope Aturan mengandung satu atau lebih kumpulan aturan dan dapat digunakan dalam dua cara:

• Sebagai blok terpisah dalam CSS, dalam hal ini, ia mengandung bagian awal, termasuk akar lingkungan dan pilihan pemilihan batas lingkungan — yang menentukan batas atas dan bawah lingkungan.
• Sebagai gaya rongga dalam HTML <style> elemen, dalam hal ini, bagian awal diabaikan dan aturan yang disertakan akan berlaku otomatis untuk elemen bapak <style>.

Contoh 4

“Lingkungan donut” hanya untuk elemen yang berada di antara dua elemen di pohon bapak. Ini adalah contoh:

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

Coba sendiri

CSS syntax

@scope (Akar lingkungan) {
  Kumpulan aturan
}

atau

/* Lingkungan donut */
@scope (Akar lingkungan) to (Batas lingkungan) {
  Kumpulan aturan
}

Dukungan browser

Angka di dalam jadwal menunjukkan versi paling awal penggunaan @ aturan yang sepenuhnya didukung browser.