@规则

  • 版本网址缩略名: CSS/At-rule
  • 版本标题: @规则
  • 版本 id: 375269
  • 创建于:
  • 创建者: alimon
  • 是否是当前版本?
  • 评论

修订内容

一条 @规则 是以 '@' (U+0040 COMMERCIAL AT)符号开头,后面紧跟一个标示符,并以第一个分号';' (U+003B SEMICOLON)结尾,后面是一个语句块,或者以遇到的第一个CSS 语句块作为结尾的一条CSS 声明. .

这里是一些 @规则, 根据他们的标示符来区分不同的规则, 每一种规则都有不同的语法:

  • {{ cssxref("@charset") }}, 定义样式表使用的字符集.
  • {{ cssxref("@import") }}, 告诉 CSS 引擎引入一个额外的样式表.
  • {{ cssxref("@namespace") }}, 告诉 CSS 引擎 此样式表中所有的内容必须考虑命空间前缀.
  • 嵌套的@规则, 是一个嵌套声明的子集,它不仅仅可以作为声明或者一个样式表,也可以内嵌 CSS 条件组:
    • {{ cssxref("@media") }}, 使用媒体查询的方式如果设备满足条件组中给出的规则那么就应用它所定义的内容.
    • {{ cssxref("@page") }}, 描述当打印文档时被应用的于布局方面的变化.
    • {{ cssxref("@font-face") }}, 描述哪些额外的字体需要被下载下来. {{ experimental_inline() }}
    • {{ cssxref("@keyframes") }}, 描述一套 CSS 动画序列中的中间步骤 . {{ experimental_inline() }}
    • {{ cssxref("@supports") }}, 当浏览器满足条件组中给出的的规则那么就应用它所定义中的内容. {{ experimental_inline() }}
    • {{ cssxref("@document") }}, 如果文档样式表满足条件组中给出的规则那么就应用它所定义中的内容. (推延至 CSS Level 4 规范)

条件组规则

就像属性值那样,每一条@规则都有不同的语法. 不过他们中的一些规则可以被分到一个特殊的组中, 条件组规则. 这些声明使用相同的语法. 他们都包含内嵌的,要么是 规则 要么是 内嵌@规则. 他们都传达一个共同的语义: 他们所包含的条件 (各种不同的), 在任何时候值都是 true 或者 false. 如果条件表达式的值为 true 那么组内的所有声明都会被应用.

条件组规则在CSS Conditionals Level 3 中定义如下:

  • {{ cssxref("@media") }},
  • {{ cssxref("@supports") }},
  • {{ cssxref("@document") }}. (推迟至 CSS Level 4 规范)

由于每个条件组规则也都可能包含嵌套的声明, 所以这里会有不明确数量的嵌套.

规范

Specification Status Comment
{{ SpecName('CSS3 Conditional') }} {{ Spec2('CSS3 Conditional') }}  

{{ languages( { "ja": "ja/CSS/At-rule" } ) }}

修订版来源

<p>一条&nbsp;<strong>@规则</strong>&nbsp;是以<span style="line-height: 21px;">&nbsp;'</span><code style="font-size: 14px; line-height: inherit;">@</code><span style="line-height: 21px;">' (</span><code style="font-size: 14px; line-height: inherit;">U+0040 COMMERCIAL AT</code><span style="line-height: 21px;">)符号开头,后面紧跟一个标示符,并以第一个分号</span><span style="line-height: 21px;">'</span><code style="font-size: 14px; line-height: inherit;">;</code><span style="line-height: 21px;">' (</span><code style="font-size: 14px; line-height: inherit;">U+003B SEMICOLON</code><span style="line-height: 21px;">)结尾,后面是一个</span><a href="https://developer.mozilla.org/en/CSS/Syntax#CSS_declarations" style="line-height: 21px;" title="en/CSS/Syntax#CSS_declarations">语句块</a>,<span style="line-height: 21px;">或者以遇到的第一个</span><a href="https://developer.mozilla.org/en/CSS/Syntax#CSS_declarations" style="line-height: 21px;" title="en/CSS/Syntax#CSS_declarations">CSS 语句块</a><span style="line-height: inherit;">作为</span><span style="line-height: inherit;">结尾的一条</span><a href="/en/CSS/Syntax#CSS_statements" style="line-height: inherit;" title="en/CSS/Syntax#CSS_statements">CSS 声明</a><span style="line-height: inherit;">.</span><span style="line-height: inherit;">&nbsp;</span><span style="line-height: inherit;">.</span></p>
<p>这里是一些 @规则, 根据他们的标示符来区分不同的规则, 每一种规则都有不同的语法:</p>
<ul>
  <li>{{ cssxref("@charset") }}, 定义样式表使用的字符集.</li>
  <li>{{ cssxref("@import") }}, 告诉 CSS 引擎引入一个额外的样式表.</li>
  <li>{{ cssxref("@namespace") }}, 告诉 CSS 引擎 此样式表中所有的内容必须考虑命空间前缀.</li>
  <li>嵌套的@规则, 是一个嵌套声明的子集,它不仅仅可以作为声明或者一个样式表,也可以内嵌 CSS 条件组:
    <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="Conditional_Group_Rules">条件组规则</h2>
<p>就像属性值那样,每一条@规则都有不同的语法. 不过他们中的一些规则可以被分到一个特殊的组中, <strong>条件组规则</strong>. 这些声明使用相同的语法. 他们都包含内嵌的,要么是&nbsp;<em>规则</em>&nbsp;要么是&nbsp;<i>内嵌@规则</i>. 他们都传达一个共同的语义: 他们所包含的条件 (各种不同的), 在任何时候值都是&nbsp;<strong>true</strong>&nbsp;或者&nbsp;<strong>false</strong>. 如果条件表达式的值为&nbsp;<strong>true</strong>&nbsp;那么组内的所有声明都会被应用.</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="Specifications">规范</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>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p>
恢复到这个版本