1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
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>
|
