❕CSS At-rule
两种 CSS 语句:规则集和 At-rule
Last updated
两种 CSS 语句:规则集和 At-rule
Last updated
CSS 里的绝大部分内容都是规则集,即选择器和属性:值
的集合。
当然,也有一些功能是规则集覆盖不到的,比如开发者想在样式表里指定字符集、字体、列表计数器等信息,或是想导入外部样式表。要想实现上述功能,就得用到 CSS 里的另一种语句了。
CSS 语句是一个构建块,它以任何非空格字符开始,以 }
或 ;
结束。有两种类型的 CSS 语句,分别是规则集和 At-rule。任何不是规则集也不是 At-rule 的语句都是无效的,会被忽略。
还有一组语句叫嵌套语句,它们可以用在部分 At-rule 里,比如条件组的规则。此外,《CSS Nesting Module》 规范也列出了 CSS 原生嵌套的功能,目前尚处于工作草案阶段,更多详情可查阅历史文章《CSS 的原生嵌套》。
这部分将介绍 At-rule 语句。
At-rule 以 @
开始,后面跟一个标识符,然后一直持续到语句末尾,要么是 }
要么是 ;
。
每种 At-rule 的类型由其标识符定义的,它们都有自己的内部语法和语义。At-rule 可以用来传达元数据信息(如@charset
, @import
)、条件信息(如@media
)和描述性信息(如@font-face
)等。
@charset
字符集(均为非嵌套语句)
@import
外部导入
@namespace
定义 XML 命名空间
@media
媒体查询
@supports
特性查询
@container
容器查询
@document
(已废弃)
根据 URL
@keyframes
@scroll-timeline
@font-face
@font-feature-values
@swash
@annotation
@ornaments
@stylistic
@styleset
@character-variant
@font-palette-values
@page
@top-center
@bottom-center
@left-bottom
@right-bottom
@counter-style
可用在 list-style
,counter()
, counters()
@color-profile
可用在 color()
@property
CSS Houdini
@layer
级联层
@viewport
(已废弃) 配置视口
@historical-forms