条件CSS分类
目前的三个@规则：
@media
@supports
@viewport
CSS的@规则
CSS的@规则是（at-rule）是一条语句，它为CSS提供了执行或如何执行的指令。
@规则以@开头，后面跟相应的关键词，关键词充当标识符。
CSS的@规则分为常规规则和嵌套规则两大类。
常规规则：
语法：@关键词
常见的规则：
@charset 'utf-8'
1，应用于某些CSS属性（content）中使用非ASCII字符或包含UTF—8等非ASCII字符时，@charset非常有用。
2，@charset规则必须是样式表中第一个元素，前面不能有任何字符。用户代理必须忽略样式表开头之外的任何@chartset规则。
如果定义了几个@charset规则，则只使用第一个。
@import
允许用户从其他样式表导入样式规则。
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville");
@import url("print.css") print;
@import url("tv.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and
实际项目中不建议使用@import来引用其他CSS样式文件。这样不但请求多，还会造成堵塞。
@namespace
通常在处理多个命名空间的文档时有用，比如包含内联SVG或MathML的HTML，或者包含多个词汇表的XML。
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 和所有XHTML中的a元素匹配，因为XHTML是默认的命名空间 /
a { color: red; }
/ 和所有SVG中的a元素匹配 /
svg|a { color: blue; }
/ 同时匹配XHTML和SVG中的a元素 */
*|a { color: orange; }
几点注意：
任何@namespace规则都必须遵循所有@charset和@import规则，并位于样式表中所有其他@规则和样式声明之前
@namespace规则可以用于定义样式表的默认命名空间。定义默认命名空间时，所有通用选择器和类型选择器（不包含属性选择器）仅应用于该命名空间中的元素
@namespace规则还可以用于定义命名空间的前缀。如果泛型、类型和属性选择器的前缀是命名空间的前缀，那么该选择器只在元素或属性的命名空间和名称匹配时才匹配
嵌套规则
与常规规则不同，后面会带一个{}，括号会嵌套一些样式规则：
@[关键词] {
/* 样式规则 */
}
常见的嵌套规则：
@font-face
允许引用自定义字体。
@font-face { [ font-family:
; ] ||
[ src: [[ format( #) ]? | ]#; ] ||
[ unicode-range:#; ] ||
[ font-variant:; ] ||
[ font-feature-settings: normal |#; ] ||
[ font-stretch:; ] ||
[ font-weight:; ] ||
[ font-style: