CSSRuleList

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

CSSRuleList 表示一个只读的 CSSRule 对象有序集合。

虽然 CSSRuleList 对象是只读的，不能直接修改，但它被认为是一个实时对象，因为其内容会随着时间的推移而改变。

要编辑由 CSSRule 对象返回的底层规则，请使用 CSSStyleSheet.insertRule() 和 CSSStyleSheet.deleteRule()，它们是 CSSStyleSheet 的方法。

这个接口曾是创建不可修改列表的尝试，并且至今仍然被支持，以免破坏现有代码。现代 API 使用基于 JavaScript 数组的类型来表示列表结构，从而提供了许多数组方法，同时对其使用施加了额外的语义（例如，使其项只读）。

这些历史原因并不意味着开发者应该避免使用 CSSRuleList。您自己不会创建 CSSRuleList 对象，而是从 CSSStyleSheet.cssRules 和 CSSKeyframesRule.cssRules 等 API 获取它们，并且这些 API 没有被弃用。但是，请注意与真实数组在语义上的差异。

实例属性

CSSRuleList.length 只读: 返回一个整数，表示集合中 CSSRule 对象的数量。

实例方法

CSSRuleList.item(): 获取单个 CSSRule。

示例

在下面的示例中，有一个包含三条规则的样式表。使用 CSSStyleSheet.cssRules 返回一个 CSSRuleList，并将其打印到控制台。

使用 CSSRuleList.length 将列表中的规则数量打印到控制台。使用 0 作为 CSSRuleList.item 的参数可以返回第一个 CSSRule。在此示例中，它将返回为 body 选择器设置的规则。

CSS

css

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > * {
  background-color: #3740ff;
  color: white;
}

JavaScript

let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);

规范

规范
CSS 对象模型 (CSSOM) # the-cssrulelist-interface

浏览器兼容性

另见

CSSRule

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月8日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误