新变化 on Last Stand

新变化

Sat, 09 Nov 2024 00:00:00 +0800

CSS 发展史

上图是20 世纪 90 年万维网刚出现时，由于当时并没有可以装饰网页的方法，原始的 Web 页面呈现的效果，随着 CSS（层叠样式表，Cascading Style Sheets）的诞生与发展，Web页面的样式有了翻天覆地的变化。

CSS的发布过程

CSS1.0 19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
CSS2.0 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
CSS2.1 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性
CSS3 从2011年开始CSS被分为多个模块单独升级。这些模块统称为CSS3 包含有：

CSS 选择器level3
CSS 媒体查询level3
CSS color level3

CSS4 设计中

CSS 标准的制定大概有下面几个步骤

下面主要介绍的是与我们日常工作有关联的一些新特性，其中一些已经在主流浏览器中得到了支持，还有一些特性还在草案阶段，可能还会有一些变化。

CSS 伪类选择器

is()和where()

在编写css时，有时会需要使用很长的选择器列表来定位具有相同样式的子元素，比如对所有H元素下的span设置为block，之前会这么写:

这样写选择器看起来很长，可读性差。此时，可以使用is()来提高易读性，同时避免使用长选择器

浏览器支持:

:is() Chrome 88/ Firefox 78/ Edge 88 /Safari 14
:where() Chrome 88/ Firefox 78/ Edge 88 /Safari 14

注意：

is()和where()在使用方法上和其他的伪类选择器一样，可以任意组合排列。
is()和where()的功能大体上是一样的，他们的差异性体现在选择器的权重上

where()选择器没有权重，也就是权重是0
is()选择器的权重由它的选择器列表中的最搞权重决定

规则示例: