At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可，这篇文章主要介绍了CSS-@规则(At-rules)常用语法使用总结,需要的朋友可以参考下
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。
这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。
常用规则
@import
@import 主要用于从其他样式表导入新的样式规则，语法：@import url|string list-of-mediaqueries;。
- url|string：需要引入的样式资源路径，相对路径或绝对路径都可以；
- list-of-mediaqueries：逗号分隔的条件列表，判断什么条件下才引入该样式资源，支持媒体查询条件。
@import "./reset.css"; @import url("./reset.css")当使用条件判断时，可以使用媒体查询条件。
/* 宽度小于1000px才会生效 */ @import "./reset.css" screen and (max-width: 1000px);
另外，当在html文件或样式文件中使用该语法(不使用现代框架)，有两点需要注意：
- 引入位置：必须位于样式文件或
JS检测媒体查询
使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用方式：
// 获取媒体查询MediaQueryList对象，有matches const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)') console.log(1, screenMediaQueryList) // matches: true -- 当前媒体查询规则已生效，为false则不生效 // media: "(max-width: 1000px)" screenMediaQueryList.addEventListener('change', (res) => { console.log(2, res) })可以获取当前是否已使用该媒体查询规则，或者监听媒体查询状态的变化事件。
非常用规则
以下是一些使用较少的@规则。
@supports
@supports 用于指定依赖于浏览器一个或多个特定CSS功能的支持申明。常用来判断当前浏览器是否支持某个CSS特性功能，所以又被称为特性查询。
ie不支持。
如判断自定义属性，详见自定义属性知识介绍。
@supports ((--a: 0)) { /* 支持自定义属性 */ } @supports (not (--a: 0)) { /* 不支持自定义属性 */ }语法，由一组样式声明和一条支持条件构成，支持条件可以是多条，可以使用 and、or、not 等进行结合处理；还可以使用圆括号调整优先级。
/* 浏览器支持grid */ @supports (display: grid) { div {} } /* 不支持grid */ @supports not (display: grid) { } /* 不支持gri和flex */ @supports not ((display: grid) and (display: flex)) { }其他
- @namespace：是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。
- @page：主要用于打印文档时修改某些CSS属性，兼容性不高。
- counter-style：定义如何把一个计数器的值转化为字符串表示。
到此这篇关于CSS-@规则(At-rules)常用语法使用总结的文章就介绍到这了,更多相关css @规则At-rules内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！
