CSS发展史
上图是 20 世纪 90 年代万维网首次出现的时候。 由于当时还没有办法对网页进行装饰，原始网页呈现的疗效就大打折扣了。 随着CSS（Cascading Style Sheets）的诞生和发展，网页样式的外观发生了巨大的变化。
CSS 发布流程
CSS1.0 1999年12月，W3C发布了第一个与样式相关的标准CSS1.0。 在这个版本中，已经包含了字体相关属性、颜色和背景相关属性、文本相关属性、框相关属性等。
CSS2.0 1985年5月，CSS2.0即将推出。 该版本建议将内容和呈现效果分开，并开始使用样式表结构。
CSS2.1 2004年2月，CSS2.1即将发布。它在CSS2.0的基础上稍作修改，删除了很多浏览器不支持的属性。
CSS3 CSS从2011年开始被划分为多个模块并分别升级。这些模块也称为CSS3，包含：
CSS4设计
CSS标准的制定有以下步骤：
下面主要介绍一些与我们日常工作相关的新功能，其中一些功能已经在主流浏览器中支持，还有一些功能还处于草案阶段，可能会有一些变化。
CSS 伪类选择器 is() 和 where()
编译css时，有时需要使用一长串选择器来定位相同样式的子元素，比如将所有H元素下的span设置为block，如前所述：
这样写选择器看起来很长，可读性很差。此时可以使用 is() 来提高可读性，同时防止使用长选择器
浏览器支持：
注意：
is() 和 where() 的使用方式与其他伪类选择器相同，并且可以任意组合。
is()和where()的功能大致相同，它们的区别体现在选择器的权重上
规则示例：
有（）
has() 选择器通常被描述为“父选择器”，它接受选择器的相对列表，如果至少有一个其他元素与列表中的选择器匹配，则该选择器将表示一个元素。
它的使用方法如下：
这个选择器的意思是，如果父元素下面有子元素，那么父元素就会被选中，这就是为什么它可以被称为“父选择器”
注意：
has()选择器的权重与is()选择器的权重相同，由其选择器列表中权重最高的选择器决定
浏览器支持：
该选择器目前仅 Safari 支持，需要在实验功能中自动启用
CSS 颜色 hwb()
HWB是一种新的颜色定义函数，它的三个值分别代表色相、白度和黑度。它是一种更人性化的颜色表达方式，因为它只是一种色调和一定量的红色或紫色来变亮或变暗
hwb()颜色函数形成的颜色也是来自sRGB颜色空间，所以不会形成新的颜色
浏览器支持：
新的色彩空间如lch、oklch、lab、oklab、display-p3等。CSS在2022年将提供10个新的色彩空间，每个色彩空间都有独特的功能，它们相比sRGB色彩空间可以带来更丰富的色彩Hue显示
浏览器支持：
颜色混合()
color-mix() 函数接受两个值并返回它们在给定颜色空间中以指定混合程度混合的结果
浏览器支持：
从颜色列表中，输出与第一个参数相比具有最高对比度的颜色
浏览器支持：
相对颜色
相对颜色相当于对色调通道进行重构，也可以改变通道的值形成新的颜色
浏览器支持：
强调色
强调颜色可以用来改变外部组件的颜色，浏览器可以根据系统的配色方案（黑白模式）智能匹配对比色。 目前，支持变更的外部组件包括
- <input type="checkbox">
- <input type="radio">
- <input type="range">
- <progress>
其用法如下
最后结果：
浏览器支持：
新颜色定义句型
原来的rgb()、hsl()、#rrggbb等颜色值定义语法规则也进行了调整。比如原来我们用“,”来分隔不同颜色通道的值，但现在我们可以使用空格
CSS 语法惰性
惰性意味着单个元素不能相互作用。 其效果与使用alert()函数后的页面类似。 页面的其他部分将被冻结，用户只能与指定部分进行交互。 这个功能在弹框、菜单等交互中都能发挥作用。
浏览器支持：
@层
@layer是2022年最引人注目的CSS新功能。在@layer之前css3 浏览器宽度，加载样式表的顺序非常重要，因为最后加载的样式会覆盖之前加载的样式，这导致开发者关注入口样式表单管理，而@layer级联层提供了结构化的形式来组织和平衡单一源中的CSS规则，并最终决定采用谁的规则。
使用@layer，开发者可以在样式文件中预先定义规则的层次顺序，以控制不同样式之间的优先级。 其句型如下
由于@layer B的顺序在@layer A之后，所以@layer B中所有样式的优先级都会高于@layer Acss3 浏览器宽度，即B>A，所以最终div的颜色为绿色：@ Layer还支持同时命名多个@layer层，此时其优先级按照命名顺序，即A>C>B，最终div的颜色为蓝色
利用@layer特性，我们可以将样式进行不同层次的组织，并利用顺序来控制全局样式的优先级
浏览器支持：
@容器
在响应式布局中，常使用媒体查询来检测窗口的宽度和高度，以实现元素样式的手动调整。 容器查询允许我们根据其父元素的大小来设置元素的样式。 它类似于 @media 查询，不同之处在于它基于容器的大小而不是层的大小。
其句型如下：
要使用容器查询，您需要使用容器属性（容器类型和容器名称的简写）指定一个元素作为容器。 容器类型可以是宽度、高度、内联大小、块大小。 逻辑属性，例如内联大小和块大小
@媒体
以前在@media规则中写判断条件的时候经常会用到min-width和max-width，但是这些写法都不是很直观，而且有一些理解成本。 现在你可以使用更熟悉的物理表达，即使用 > 、 > = 、 < 或
发表评论