Hausa lafiyoyin @scope atawu

定义和用法

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 {
    كولور: green;
  }
}

الجرب

查看以下 HTML：


  

    
Some header

    Some image

这里有一些嵌套的

元素，如果我们想为上述 container/news 部分中的

和 元素设置样式，则必须编写以下内容（不使用 @scope）：

例子 2

.container .news h2 {
  كولور: green;
}
.container .news img {
  border: 2px solid maroon;
}

الجرب

使用 @scope 规则，您可以精确地定位元素，而无需编写过于复杂的选择器，如下所示：

例子 3

在这里，我们仅针对 .container 组件中的

和 元素，将 .container 设置为 @scope 规则的根作用域：

@scope (.container) {
  h2 {
    فونت-سايز: 30px;
    كولور: green;
  }
  img {
    كوردورو: 5px داروتبولو maroon;
  }
}

الجرب

@scope 规则包含一个或多个规则集，可以通过两种方式使用：

  • 作为 CSS 中的独立块，在这种情况下，它包含一个前导部分，其中包括作用域根和可选的作用域限制选择器——这些定义了作用域的上下边界。
  • 作为 HTML 中