1 files changed, 234 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/cssrule/index.html b/files/zh-cn/web/api/cssrule/index.html
new file mode 100644
index 0000000000..184e25376b
--- /dev/null
+++ b/files/zh-cn/web/api/cssrule/index.html
@@ -0,0 +1,234 @@
+---
+title: CSSRule
+slug: Web/API/CSSRule
+tags:
+  - API
+  - CSSOM
+  - 参考
+  - 接口
+translation_of: Web/API/CSSRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><strong><code>CSSRule</code></strong> 接口表示一条 CSS 规则。有几种不同的规则类型，在下面的{{anch("类型常量")}}部分中有悉数列出。</p>
+
+<p><code>CSSRule</code> 接口指定了所有类型的规则的公共属性，而特定类型的规则的专有属性则在这些规则各自类型的、更专用的接口中被指定。</p>
+
+<p>可以通过 {{domxref("CSSStyleSheet")}} 的 <code>cssRules</code> 列表了解更多关于 <code>CSSRule</code> 的介绍。</p>
+
+<h2 id="所有_CSSRule_实例共有的属性">所有 CSSRule 实例共有的属性</h2>
+
+<dl>
+ <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
+ <dd>返回规则的文本表示. 例如 <code>"h1,h2 { font-size: 16pt }"</code></dd>
+ <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
+ <dd>返回包含规则，否则返回 <code>null</code>。例如：如果此规则是 {{cssxref("@media")}} 块中的样式规则, 则其父规则将是该 {{domxref("CSSMediaRule")}}。</dd>
+ <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
+ <dd>返回包含此规则的样式表的 {{domxref("CSSStyleSheet")}} 对象。</dd>
+ <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
+ <dd>规则类型，表示 CSS 规则类型 {{anch("类型常量")}} 中的一种类型。</dd>
+</dl>
+
+<h2 id="常量">常量</h2>
+
+<h3 id="类型常量">类型常量</h3>
+
+<p><code>CSSRule接口通过一系列整型常量来约束CSSRule的</code>{{domxref("cssRule/type","type")}}取值范围，同时这些常量也对应规则的具体实现接口。这些常量和接口的对应关系如下：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>类型</th>
+   <th>值</th>
+   <th>对应接口</th>
+   <th>备注与示例</th>
+  </tr>
+  <tr>
+   <td><code>CSSRule.STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>1</code></td>
+   <td>{{domxref("CSSStyleRule")}}</td>
+   <td>最常见的一种规则。<br>
+    <code>selector { prop1: val1; prop2: val2; }</code></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.IMPORT_RULE</code></td>
+   <td style="text-align: center;"><code>3</code></td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>一条 {{cssxref("@import")}} 规则。(Until the documentation is completed, see the interface definition in the Mozilla source code: <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.MEDIA_RULE</code></td>
+   <td style="text-align: center;"><code>4</code></td>
+   <td>{{domxref("CSSMediaRule")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FACE_RULE</code></td>
+   <td style="text-align: center;"><code>5</code></td>
+   <td>{{domxref("CSSFontFaceRule")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.PAGE_RULE</code></td>
+   <td style="text-align: center;"><code>6</code></td>
+   <td>{{domxref("CSSPageRule")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAMES_RULE</code></td>
+   <td style="text-align: center;"><code>7</code></td>
+   <td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAME_RULE</code></td>
+   <td style="text-align: center;"><code>8</code></td>
+   <td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><em>Reserved for future use</em></td>
+   <td style="text-align: center;"><code>9</code></td>
+   <td></td>
+   <td>应当会在将来被用于定义颜色配置</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.NAMESPACE_RULE</code></td>
+   <td style="text-align: center;"><code>10</code></td>
+   <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.COUNTER_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>11</code></td>
+   <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.SUPPORTS_RULE</code></td>
+   <td style="text-align: center;"><code>12</code></td>
+   <td>{{domxref("CSSSupportsRule")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.DOCUMENT_RULE</code></td>
+   <td style="text-align: center;"><code>13</code></td>
+   <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td>
+   <td style="text-align: center;"><code>14</code></td>
+   <td>{{domxref("CSSFontFeatureValuesRule")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.VIEWPORT_RULE</code></td>
+   <td style="text-align: center;"><code>15</code></td>
+   <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.REGION_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>16</code></td>
+   <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.UNKNOWN_RULE</code></td>
+   <td style="text-align: center;"><code>0</code></td>
+   <td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.CHARSET_RULE</code></td>
+   <td style="text-align: center;"><code>2</code></td>
+   <td><code>CSSCharsetRule</code> {{obsolete_inline}}</td>
+   <td>（已在大多数浏览器中被移除）</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An up-to-date informal list of constants can be found on the <a href="https://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p>
+
+<h2 id="语法">语法</h2>
+
+<p>使用 <a href="https://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> 语法格式进行描述。</p>
+
+<pre class="notranslate">interface CSSRule {
+    const unsigned short STYLE_RULE = 1;
+    const unsigned short CHARSET_RULE = 2;
+    const unsigned short IMPORT_RULE = 3;
+    const unsigned short MEDIA_RULE = 4;
+    const unsigned short FONT_FACE_RULE = 5;
+    const unsigned short PAGE_RULE = 6;
+    const unsigned short KEYFRAMES_RULE = 7;
+    const unsigned short KEYFRAME_RULE = 8;
+    const unsigned short NAMESPACE_RULE = 10;
+    const unsigned short COUNTER_STYLE_RULE = 11;
+    const unsigned short SUPPORTS_RULE = 12;
+    const unsigned short DOCUMENT_RULE = 13;
+    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
+    const unsigned short VIEWPORT_RULE = 15;
+    const unsigned short REGION_STYLE_RULE = 16;
+    readonly attribute unsigned short type;
+    attribute DOMString cssText;
+    readonly attribute CSSRule? parentRule;
+    readonly attribute CSSStyleSheet? parentStyleSheet;
+};</pre>
+
+<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', '#css-rules', 'CSSRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Added value <code>COUNTER_STYLE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CSSRule")}}</p>
+
+<h2 id="相关">相关</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>