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
|
---
title: '@规则'
slug: Web/CSS/At-rule
tags:
- At-rule
translation_of: Web/CSS/At-rule
---
<p>一个<strong> at-rule</strong> 是一个<a href="https://developer.mozilla.org/en/CSS/Syntax#CSS_statements" title="en/CSS/Syntax#CSS_statements">CSS 语句，</a>以at符号开头, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), 后跟一个标识符，并包括直到下一个分号的所有内容, '<code>;</code>' (<code>U+003B SEMICOLON</code>), 或下一个CSS块，以先到者为准。</p>
<p>下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:</p>
<ul>
<li>{{ cssxref("@charset") }}, 定义样式表使用的字符集.</li>
<li>{{ cssxref("@import") }}, 告诉 CSS 引擎引入一个外部样式表.</li>
<li>{{ cssxref("@namespace") }}, 告诉 CSS 引擎必须考虑XML命名空间。</li>
<li>嵌套@规则, 是嵌套语句的子集,不仅可以作为样式表里的一个语句，也可以用在条件规则组里：
<ul>
<li>{{ cssxref("@media") }}, 如果满足媒介查询的条件则条件规则组里的规则生效。</li>
<li>{{ cssxref("@page") }}, 描述打印文档时布局的变化.</li>
<li>{{ cssxref("@font-face") }}, 描述将下载的外部的字体。 {{ experimental_inline() }}</li>
<li>{{ cssxref("@keyframes") }}, 描述 CSS 动画的中间步骤 . {{ experimental_inline() }}</li>
<li>{{ cssxref("@supports") }}, 如果满足给定条件则条件规则组里的规则生效。 {{ experimental_inline() }}</li>
<li>{{ cssxref("@document") }}, 如果文档样式表满足给定条件则条件规则组里的规则生效。 <em>(推延至 CSS Level 4 规范)</em></li>
</ul>
</li>
</ul>
<h2 id="条件规则组">条件规则组</h2>
<p>就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类： <strong>条件规则组</strong>. 这些语句使用相同的语法. 它们都嵌套语句，或者是<em>规则</em>或者是<em>@规则</em>。它们都表达： 它们所指的条件 (类型不同) 总等效于 <strong>true</strong> 或者 <strong>false</strong>，如果为 <strong>true</strong> 那么它们里面的语句生效。</p>
<p>条件规则组由CSS Conditionals Level 3 定义:</p>
<ul>
<li>{{ cssxref("@media") }},</li>
<li>{{ cssxref("@supports") }},</li>
<li>{{ cssxref("@document") }}. <em>(推迟至 CSS Level 4 规范) </em></li>
</ul>
<p>既然条件规则组可以嵌套语句, 那么嵌套层级不定。</p>
<div class="noinclude">
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{ SpecName('CSS3 Conditional') }}</td>
<td>{{ Spec2('CSS3 Conditional') }}</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p>
|
