CSSLayerStatementRule

基线 2022

新可用

自 2022 年 3 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能无法在较旧的设备或浏览器中使用。

CSSLayerStatementRule 代表一个 @layer 语句规则。与 CSSLayerBlockRule 不同，它不包含其他规则，仅通过提供层名称来定义一个或多个层。

此规则允许显式声明在 CSS 文件开头以明显方式排列的层级：层级顺序由每个层名称首次出现的顺序定义。使用语句声明它们可以让读者了解层级顺序。它还允许将内联层和导入层交织在一起，这在使用 CSSLayerBlockRule 语法时是无法实现的。

CSSRule CSSLayerStatementRule

实例属性

它还从其父接口 CSSRule 继承属性。

示例

HTML

html
<p></p>

CSS

css
@layer layerName, layerName2;

JavaScript

js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page

const layer = rules[0]; // A CSSLayerStatementRule

item.textContent = `The CSS @layer statement declares the following layers: ${layer.nameList.join(
  ", ",
)}.`;

结果

规范

规范
CSS 级联和继承第 5 级
# csslayerstatementrule

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅