CSSLayerBlockRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

CSSLayerBlockRule 表示一个 @layer 块规则。

实例属性

继承其祖先 CSSGroupingRule 和 CSSRule 的属性。

CSSLayerBlockRule.name 只读: 包含关联级联层名称的字符串。

实例方法

继承其祖先 CSSGroupingRule 和 CSSRule 的方法。

示例

HTML

html

<p>我以 <code>color: rebeccapurple</code> 显示。</p>

CSS

css

@layer special {
  p {
    color: rebeccapurple;
  }
}

JavaScript

const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// 注意，样式表 #1 是与此嵌入示例关联的样式表，
// 而样式表 #0 是与整个 MDN 页面关联的样式表

const layer = rules[0]; // CSSLayerBlockRule 对象

item.textContent = `CSSLayerBlockRule 是用于“${layer.name}”层的规则`;

结果

规范

Specification
CSS Cascading and Inheritance Level 5 # csslayerblockrule