initial commit

1 files changed, 67 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/cssrulelist/index.html b/files/zh-cn/web/api/cssrulelist/index.html
new file mode 100644
index 0000000000..75ea4134e4
--- /dev/null
+++ b/files/zh-cn/web/api/cssrulelist/index.html
@@ -0,0 +1,67 @@
+---
+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>