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

Subukan nang personal

Tingnan ang sumusunod na HTML:

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

May mga nakakasampung <div> elemento dito, kung gusto naming itakda ang estilo para sa mga elemento <h2> at <img> sa bahagi ng container/news, dapat nagsulat ang sumusunod (hindi gamit ang @scope):

Halimbawa 2

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

Subukan nang personal

Gamit @scope Ang patakaran, puwedeng tukuyin ang elemento nang tiyak, na hindi kailangang isulat ang napakalalim na selector, tulad ng nasabing:

Halimbawa 3

Dito, inilalagay namin ang .container bilang root na sakop ng patakaran @scope para sa mga elemento <h2> at <img> sa komponente ng .container:

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

Subukan nang personal

@scope Ang patakaran ay naglalaman ng isang o ilang set ng patakaran, na maaaring gamitin sa dalawang paraan:

• Bilang isang malayang bloke ng CSS, sa ganitong sitwasyon, ito ay naglalaman ng isang pangunahing bahagi, kabilang ang root ng sakop at opsyonal na pili ng limitasyon ng sakop selector—ang nagtutukoy sa pangunguna at ibabaw ng sakop.
• Bilang inline style sa <style> elemento ng HTML, sa ganitong sitwasyon, ang pangunahing bahagi ay nilabas, at ang nakalalagay na set ng patakaran ay magiging aktibo sa magulang na elemento ng <style> elemento.

Halimbawa 4

Ang "Sakop ng甜甜圈" ay tumutukoy lamang sa mga elemento na nasa pagitan ng dalawang elemento sa puno ng baba. Ito ay isang halimbawa:

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

Subukan nang personal

CSS grammar

@scope (Root ng sakop) {
  Set ng patakaran
}

o

/* Sakop ng甜甜圈 */
@scope (Root ng sakop) sa (Limitasyon ng sakop) {
  Set ng patakaran
}

Suporta ng browser

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa @ patakaran.