CSS @scope kuralı

定义和用法

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

Kişisel olarak deneyin

Aşağıdaki HTML'yi görün:

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

Burada bazı iç içe <div> elementleri var. Eğer container/news kısmındaki <h2> ve <img> elementlerine stil uygulamak istiyorsanız, aşağıdaki içeriği yazmanız gerekecek ( @scope kullanmadan):

Örnek 2

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

Kişisel olarak deneyin

Kullanarak @scope Kural, elementleri belirli bir seçici yazmadan doğru bir şekilde belirlemenizi sağlar, aşağıdaki gibi:

Örnek 3

Burada, sadece .container bileşenindeki <h2> ve <img> elementleri için .container'i @scope kuralının kök kapsamı olarak ayarlıyoruz:

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

Kişisel olarak deneyin

@scope Kural, bir veya daha fazla kural kümesine sahiptir ve iki şekilde kullanılabilir:

• CSS'deki bağımsız blok olarak, bu durumda, kapsam kökünü ve seçmeli kapsam sınırlama seçicisini içeren bir öncü kısım içerir - bu da kapsamın üst ve alt sınırlarını tanımlar.
• HTML'deki <style> elementi içindeki satır içi stiller olarak, bu durumda öncü kısım atlanır ve içeren kural kümesi otomatik olarak <style> elementinin ana elementine uygulanır.

Örnek 4

"Tatlı kraker kapsamı" sadece atalar ağacında iki element arasındaki elementler için geçerlidir. Bu örnek:

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

Kişisel olarak deneyin

CSS dilbilgisi

@scope (Kapsam kökü) {
  Kural kümesi
}

veya

/* Tatlı kraker kapsamı */
@scope (Kapsam kökü) to (Kapsam sınırlaması) {
  Kural kümesi
}

Tarayıcı desteği

Tablo içindeki rakamlar, bu @ kuralıyı tam olarak destekleyen ilk tarayıcı sürümünü gösterir.