---
title: CSSRuleList
slug: Web/API/CSSRuleList
tags:
  - API
  - CSSOM
  - 参考
  - 接口
translation_of: Web/API/CSSRuleList
---
<p>{{ APIRef("CSSOM") }}</p>

<p>CSS 规则列表 <code>CSSRuleList</code> 是一个（只允许间接更改的）类数组对象，包含着一个 <code><a href="/zh-CN/docs/Web/API/CSSRule">CSSRule</a></code> 对象的有序集合。</p>

<h2 id="描述">描述</h2>

<p>CSS 规则列表内的每一条 <code>CSSRule</code> 都可以通过 <code><var>rules</var>.item(<var>index</var>)</code>，或者更简单的 <code><var>rules</var>[<var>index</var>]</code> 的形式访问。这里的 <code><var>rules</var></code> 是一个实现了 <code>CSSRuleList</code> 接口的对象（例如 <code>{{domxref("CSSStylesheet","","",1)}}.cssRules</code>），而 <code><var>index</var></code> 是一个从 0 开始的、规则的位置索引，通过它获取规则时，顺序与 CSS 样式表中的顺序是一致的。规则对象的个数是 <code><var>rules</var>.length</code>。</p>

<p>注意，因为只能<em>间接更改</em>（<a href="https://www.w3.org/TR/cssom/#cssstylesheet">可更改</a>，但是其本身<a href="https://www.w3.org/TR/cssom/#cssrulelist">只拥有</a>读取方法），无法直接往规则列表中添加或移除规则，只能通过它的父样式表进行更改。事实上，{{domxref("CSSStyleSheet.insertRule",".insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule",".deleteRule()")}} 甚至都不是 CSSRuleList 的方法，而是 {{domxref("CSSStyleSheet")}} 的。如果，处于一些原因，出现了一个没有父样式表 或者说不属于任何样式表的规则列表（可能是另一个规则列表的<em><a href="https://www.w3.org/TR/cssom/#cssstylesheet">拷贝</a></em>），那么，既不能将它分配到某个样式表下（因为<a href="https://www.w3.org/TR/cssom/#cssrulelist">没有适用的属性</a>），它也不能被分配给任何一个样式表（因为 <code>stylesheet.cssRules</code> 是<a href="https://www.w3.org/TR/cssom/#cssstylesheet">只读</a>属性），就只能通过遍历方法，将它一条规则一条规则地<strong>插入</strong>已有的样式表中。</p>

<h2 id="示例">示例</h2>

<pre class="brush: js">// 得到文档中第一个 CSS 样式表中的第一条规则
var first_rule = document.styleSheets[0].cssRules[0];
</pre>

<h2 id="参见">参见</h2>

<ul>
 <li><code><a href="/zh-CN/docs/Web/API/CSSRule">CSSRule</a></code></li>
</ul>

<h3 id="CSSRuleList_的实现">CSSRuleList 的实现</h3>

<p>在 CSS 对象模型 CSSOM 中，有多个属性的返回值是一个 <code>CSSRuleList</code>。它们分别是：</p>

<ul>
 <li>{{domxref("CSSStyleSheet")}} 属性 {{domxref("CSSStyleSheet/cssRules", "cssRules")}}</li>
 <li>{{domxref("CSSMediaRule")}} 属性 {{domxref("CSSMediaRule/cssRules", "cssRules")}}</li>
 <li>{{domxref("CSSKeyframesRule")}} 属性 {{domxref("CSSKeyframesRule/cssRules", "cssRules")}}</li>
 <li>{{domxref("CSSMozDocumentRule")}} 属性 {{domxref("CSSMozDocumentRule/cssRules", "cssRules")}}</li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM', '#the-cssrulelist-interface', 'CSSRuleList')}}</td>
   <td>{{Spec2('CSSOM')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.CSSRuleList")}}</p>