CSSLayerBlockRule：name 属性
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
CSSLayerBlockRule 接口的只读属性 name 表示关联的层叠层的名称。
值
包含层名称的字符串，如果层是匿名的，则为 ""。
示例
HTML
html
<output></output> <output></output>
CSS
css
output {
display: block;
}
@layer special {
div {
color: rebeccapurple;
}
}
@layer {
div {
color: black;
}
}
JavaScript
js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
const rules = document.styleSheets[1].cssRules;
// 注意，样式表 #1 是与此嵌入示例相关联的样式表，
// 而样式表 #0 是与整个 MDN 页面相关联的样式表
const layer = rules[1]; // CSSLayerBlockRule
const anonymous = rules[2]; // 匿名的 CSSLayerBlockRule
item1.textContent = `第一个 CSSLayerBlockRule 定义了“${layer.name}”层。`;
item2.textContent = `第二个 CSSLayerBlockRule 定义了一个层，其名称为：“${anonymous.name}”。`;
结果
规范
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |
浏览器兼容性
Loading…
参见
@layer的声明语句由CSSLayerStatementRule表示。- 如何在 CSS 中创建具名层叠层。