CSS @scope 規則
- 上一頁 scale
- 下一頁 scroll-behavior
定義和用法
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 (作用域限制) { 規則集 }
瀏覽器支持
表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
118 | 118 | 不支持 | 17.4 | 104 |
- 上一頁 scale
- 下一頁 scroll-behavior