Quy tắc @scope của CSS

定义和用法

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

Thử ngay

Xem HTML sau:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Hình ảnh nào đó">
  </div>
</div>

Đây là một số phần tử <div> đệm, nếu chúng ta muốn đặt样式 cho các phần tử <h2> và <img> trong phần container/news trên, chúng ta phải viết nội dung sau (không sử dụng @scope):

Ví dụ 2

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

Thử ngay

Sử dụng @scope Quy tắc, bạn có thể xác định chính xác phần tử mà không cần viết bộ chọn quá phức tạp, như sau:

Ví dụ 3

Tại đây, chúng ta chỉ nhắm mục tiêu thành phần .container trong các phần tử <h2> và <img>, đặt .container làm gốc phạm vi của quy tắc @scope:

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

Thử ngay

@scope Quy tắc bao gồm một hoặc nhiều bộ quy tắc, có thể được sử dụng bằng hai cách:

• Là khối độc lập trong CSS, trong trường hợp này, nó bao gồm phần đầu tiên, bao gồm gốc phạm vi và chọn lọc giới hạn phạm vi tùy chọn - những điều định nghĩa biên giới trên và dưới của phạm vi.
• Là样式 nội bộ trong thẻ <style> của HTML, trong trường hợp này, phần đầu tiên được bỏ qua và bộ quy tắc bao gồm sẽ tự động áp dụng cho phần tử bậc cha của thẻ <style>.

Ví dụ 4

“Phạm vi bánh donut” chỉ áp dụng cho các phần tử nằm giữa hai phần tử trong cây tổ tiên. Đây là ví dụ:

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

Thử ngay

Ngữ pháp CSS

@scope (Gốc phạm vi) {
  Bộ quy tắc
}

hoặc

/* Phạm vi bánh donut */
@scope (Gốc phạm vi) to (Giới hạn phạm vi) {
  Bộ quy tắc
}

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ quy tắc @ này.