css无效 https_CSS--@规则

在 css 中主要有两种规则，一种是以 @ 开头，后面接一个标识符的 @ 规则，一种是以选择器、属性键值对构成的普通规则；在本文中主要列举介绍下 @ 规则。

常规的 @ 规则

@charset

用于指定样式表中使用的字符编码。

• 如果设置的话，必须放在最前面；
• 如果有多个 @charset ，只会使用第一个声明的规则；
• 不能用在 html 元素中或 style 标签中
• 如果有多中字符编码声明规则，使用优先级如下：
• 文件开头的字符编码声明
• http 头的字符编码声明
• css文件的@charset
• link 元素的charset设置（html5 已废除）
• 默认 utf-8

css @charset "UTF-8";

@import

用于从其他样式表导入样式规则。使用 @import 可以引入其他样式表文件的除 @charset 外的所有内容，且必须放在文件的最前面。语法如下：

@import url;
@import url list-of-media-queries;

• url 表示引入的资源的路径。
• list-of-media-queries 表示媒体查询条件列表

@import 'custom.css';
@import url('custom.css');
@import url('custom.css') print;

使用 @import 导入文件时会出现多请求、阻塞加载等问题，建议只在开发阶段使用。

@namespace

用来定义使用在CSS样式表中的XML命名空间的 @ 规则；表示内部的 CSS 选择器全都带上特定命名空间。@namespace 规则必须要放在所有的 @charset 和 @import 之后，且在样式表中要放在其他的普通规则之前。

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml)

/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */
a {}

/* 匹配所有的 SVG <a> 元素 */
svg|a {}

/* 匹配所有的 HTML <a> 元素 */
html|a{}

/* 匹配 XHTML 和 SVG <a> 元素 */
*|a {}

嵌套的 @ 规则

嵌套的 @ 规则，实际上就是在 @ 规则后面需要跟上花括号 {} 包裹其他声明的规则；不仅可以作为样式表的一个语句，还可以放在条件规则组里: @media、@supports 和 @document

@media

用于根据一个或者多个媒体查询条件的结果来应用样式表的一部分（花括号嵌套的内容）； @media 规则可以放在样式表中的任意位置；还可以放在条件规则组里。

媒体查询用于判断设备信息的一组条件，如设备的宽高值，宽高比，颜色，分辨率等。当条件为 true 时，才会执行嵌套的样式。

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}
/* 表示在设备宽度不小于900px时 article 标签的 padding 为 1rem 3rem */

@page

用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin，orphans（用于排版，表示底部的一段文字至少有几行留在本页）， widow （用于排版，表示上一页的一段文字至少有几行留在本页顶部）和 page breaks of the document。对其他属性的修改是无效的。

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
/* 表示打印时 第一页的上、左外边距均为 50% */

@font-face

用于指定文本的自定义字体。用户可以从本地字体库（local）中加载所需字体，或者从服务器（url）中加载。在同时使用 local 函数和 url 函数加载字体时，会优先加载本地的字体副本，如果没有找到，则会通过url去请求服务器的字体。@font-face 可以放在 css 样式表的顶部，也可以放在条件规则组中。

/* 定义 */
@font-face {
  /* 用于指定字体名 */
  font-family: "Open Sans"; 
  /* 指定字体文件 */
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
/* 应用 */
p {
  font-family: "Open Sans";
}

@keyframes

用于定义在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。定义关键帧规则后，要通过定义 animation-name 来使用。关键帧序列是由百分比来标识命名的，起始状态和结束状态分别为 from 和 to 代表 0% 和 100% 。

/* 声明 */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@keyframes slideout {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
  }
  100% {
    top: 60px;
  }
}
/* 应用 */
p {
  animation-name: slidein;
  animation-duration: 4s;
}
div {
  animation-name: slideout;
  animation-duration: 4s;
}

• 关键帧中如果有不支持动画的样式，则会被直接忽略。
• 重复定义同一个关键帧（百分比），则会使用最后一个定义的关键帧样式。其他定义会被完全忽略。
• 关键帧定义中的 !important 关键词将会被直接忽略。

@supports

用于检查浏览器是否支持 css 的某个特性；可用于条件规则组内部，也能用于包裹css语句。目前还是实验特性，具体使用要看浏览器是否支持

/* 判断浏览器是否支持 grid 布局 */
@supports (display: grid) {
    div {
        display: grid
    }
}

支持使用 and、or、not 操作符，分别表示逻辑运算符中的：且、或、非。

/* 判断浏览器是否支持 grid 布局和 flex 布局 */
@supports (display: grid) and (display: flex) {
    div {
        display: grid
    }
  span {
    display: flex
  }
}

@document

用于根据文档的 URL 限制其中包含的样式规则，为用户特制样式表。目前还是实验特性，标准应该会在css4制定

• url(), 匹配整个URL
• url-prefix(), 匹配文档的URL是否以参数指定的值开头
• domain(), 匹配文档的域名是否为参数中指定的域名或者为它的子域名
• regexp(), 匹配文档的URL是否和参数中指定的正则表达式匹配，该表达式必须匹配整个 URL

除正则表达式外 其他的函数可以省略小括号；且正则表达式要使用 css 的规则进行二次转义，如：要匹配点.号，正则表达式需要转义为 .，还需要使用 css 的规则再转一次 .

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* 该条CSS规则会应用在下面的网页:
     + URL为"http://www.w3.org/"的页面.
     + 任何URL以"http://www.w3.org/Style/"开头的网页
     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     
     + 任何URL以"https:"开头的网页 */

  /* make the above-mentioned pages really ugly */
  body { color: purple; background: yellow; }
}

参考文章

@规则​developer.mozilla.org