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

개인적으로 시도해 보세요

아래의 HTML을 확인하세요:

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

이렇게 내장된 <div> 요소가 있을 때, 이제 container/news 부분의 <h2>과 <img> 요소에 스타일을 설정하려면 다음과 같이 작성해야 합니다. (@scope를 사용하지 않습니다):

예제 2

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

개인적으로 시도해 보세요

사용 @scope 규칙을 사용하면 선택자를 작성할 필요 없이 정확하게 요소를 정의할 수 있습니다. 예를 들어:

예제 3

여기서는 .container 구성 요소 내의 <h2>과 <img> 요소에 대해서만 .container를 @scope 규칙의 기본 초점으로 설정합니다:

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

개인적으로 시도해 보세요

@scope 규칙은 하나나 여러 개의 규칙 집합을 포함하며, 두 가지 방식으로 사용할 수 있습니다:

• CSS의 독립적인 블록으로 사용될 때, 이 경우, 그것은 초점 뿌리와 선택할 수 있는 초점 제한 선택자를 포함하는 선두부를 포함합니다. 이는 초점의 상하 경계를 정의합니다.
• HTML에서 <style> 요소 내의 인라인 스타일로 사용될 때, 이 경우, 선두부는 제거되고 포함된 규칙 집합은 자동으로 <style> 요소의 부모 요소에 적용됩니다.

예제 4

“다이어트 링크 초점”은 조상 트리 중 두 요소 사이에 있는 요소에만 적용됩니다. 예를 들어:

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

개인적으로 시도해 보세요

CSS 문법

@scope (초점 뿌리) {
  규칙 집합
}

또는

/* 다이어트 링크 초점 */
@scope (초점 뿌리) to (초점 제한) {
  규칙 집합
}

브라우저 지원

표에서의 숫자는 이 @ 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.