东京购物商城_宝山网站建设_百度一下你就知道_吉安seo网站快速排名

五、特殊的 @规则与层叠计算

 
什么是 @规则

• At 规则是一个CSS 语句，用来指示 CSS 如何运行
  一般结构：@identifier (RULE);
• 如我们常见的 @media，@keyframes…

@规则参与层叠计算吗

• 在 CSS 中，部分 @规则参与层叠计算，部分不参与
• 而对于参与的@规则，又分为两种情况：
  1. 整体参与筛选但内部声明不参与
  2. 内部声明参与

5.1 完全不参与层叠计算的 @规则

这是因为这类@规则有特点的规则，它们的存在和处理方式与层叠机制无关

5.1.1 @charset规则

该规则用于告知浏览器该CSS文件的字符编码
它必须放在任何规则之前的CSS文件最顶部；根据CSS规范，只能出现一次

如果一个CSS文件中有多个@charset规则呢？，如下：

@charset "UTF - 8";
/* 此处省略一些CSS代码 */
@charset "ISO - 8859 - 1";
/* 此处省略一些CSS代码 */

对于上述情况，可能出现两种结果

• 只有第一个有效：浏览器通常只会识别第一个 @charset 规则，而忽略后面的规则
• 可能导致编码错误：比如，样式表中的字符实际是按照 ISO - 8859 - 1 编码保存的，但第一个 @charset 规则指定了 UTF - 8 编码，那么浏览器会以 UTF - 8 编码来解析这些字符，就可能导致字符显示不正确

5.1.2 @import规则

该规则用于引入外部的CSS文件，通常放在CSS文件的开头部分

@import url("styles.css");
@import url("styles1.css");

• 它的作用是将另一个 CSS 文件的内容引入到当前文件中
• 多个 @import 规则只是按顺序引入不同的文件，不会相互层叠，因此不参与层叠计算

5.2 整体参与筛选但内部声明不参与层叠的 @规则

这类@规则定义了一些特殊的对象，如字体、动画关键帧等，它们作为一个整体被筛选和应用，而内部的声明不会像普通的 CSS 声明那样相互层叠

5.2.1 @font-face

改规则用于自定义字体

/* 定义 */
@font-face { font-family: 'MyFont';src: url('myfont.woff2') format('woff2'); 
}
/* 使用 */
.box {font-family: 'MyFont';  
}

• 浏览器会根据 @font - face 规则的整体定义来加载和使用字体
• 不同的 @font - face 规则不会合并它们的描述符，只会选择符合条件的规则来应用，所以其内部声明不参与层叠计算

整体参与层叠算法的情况

.box {font-family: 'MyFont1';font-family: 'MyFont2';
}

5.2.2 @keyframes

改规则用于定义CSS动画的关键帧

/* 定义 */
@keyframes move {from {left:0;}to {left:10px;}
}
/* 使用 */
.box{animation:move 2s linear infinite;
}

• @keyframes 规则定义了一个完整的动画序列，浏览器会选择一个特定规则来应用动画，不会将多个 @keyframes 规则的关键帧混合在一起，所以关键帧的声明不参与层叠计算。

5.3 内部声明参与层叠计算的 @规则

这类@规则通常是条件性的，用于根据不同的条件（如媒体查询、特性检测等）来应用样式，其内部的 CSS 声明会像普通的声明一样参与层叠计算

5.3.1 @media规则

改规则根据媒体特性（如屏幕宽度、设备类型等）来应用不同的样式

@media (min - width: 768px) { body { font - size: 18px; } } @media (max - width: 767px) { body { font - size: 16px; } }

• 当满足不同的媒体查询条件时，这些规则内部的声明会像普通的 CSS 声明一样进行层叠计算，最终确定应用的样式

5.3.2 @supports规则

该规则用于检测浏览器是否支持某个 CSS 特性

@supports (display: grid) { .container { display: grid; } } @supports not (display: grid) { .container { display: flex; } }

六、重置样式 – all属性

all 属性是一个简写属性，它可以一次性重置元素的所有 CSS 属性

为什么需要all属性

• 当你的 css 对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中

all属性的取值

• initial — 将元素的所有属性重置为浏览器默认的初始值（用户代理样式表）

.box{all:initial;
}

• inherit — 让元素的所有属性继承其父元素的属性值

.parent{color:blue;
}
.parent .child{all:inherit;
}

• unset — 对于可继承的属性，使用继承的值；对于不可继承的属性，使用初始值

• revert — 如果有自定义样式表，则恢复到自定义样式表；如果没有用户自定义样式，那么就恢复到浏览器的默认样式

• revert-player — 将元素的所有属性恢复到当前层叠层中该属性的上一个值

  • 层叠层是一个更高级的特性，建立在层叠与优先级的基本概念之上

参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_cascade/Cascade