前言随着CSS的不断演进，一些很酷又好用的属性要么被完全忽略，要么因为某些原因不如其他常用属性那么熟练。应用。在本文中，我们将了解CSS中那些不熟悉但非常有用的CSS属性。这些属性你可能听说过，也可能没听说过，但是当你了解它们之后，你会发现它们是如此的实用。:is和:where伪选择器在去年获得了更广泛的浏览器支持，并且都处理分组和特异性。:is()这是一个匹配伪类，:is()接受一个选择器列表作为它的参数，以尝试匹配:is()选择器列表具有几个独特的行为：如果列出的选择器无效，规则将continue匹配一个有效的选择器。而:is(-ua-invalid,article,p)规则将同时匹配article和p。计算出的特异性将等于以最高特异性传递的选择器的特异性。例如，:is(#id,p)的特异性为#id—1.0.0—而:is(p,a)的特异性为0.0.1。CSS中的伪选择器：is()允许您更简洁地编写复合选择器。例子：我们可能见过这样的CSS，给大量的元素赋予相同的CSS样式sectionh1,sectionh2,sectionh3,sectionh4,sectionh5,sectionh6,articleh1,articleh2,articleh3,articleh4,articleh5,articleh6,asideh1,asideh2,asideh3,asideh4,asideh5,asideh6,navh1,navh2,navh3,navh4,navh5,navh6{color:#BADA55;}使用：is()看起来简洁多了：is(section,article,aside,nav):is(h1,h2,h3,h4,h5,h6){color:#BADA55;}兼容性：where()这个伪类与:is()基本相同，只是它始终具有零特异性。它还接受一个选择器列表作为它尝试匹配的参数，并将选择所有可以被选择器列表中的任何规则选择的元素。例子：当header、main、footer中的p标签悬停时，给它添加如下样式，我们可以这样写：headerp:hover,mainp:hover,footerp:hover{color:red;cursor:pointer;}我们也可以使用:where()来实现：:where(header,main,footer)p:hover{color:red;cursor:pointer;}这个看起来比上面简单多了。:where()和:is()始终为0，但:is()的优先级由其选择器列表中优先级最高的选择器决定。我们可以使用:is和:where将多个选择器组合成一个表达式。使用:where我们可以使用复杂的选择器设置安全的默认样式，这些选择器可以很容易地用简单的实用程序类覆盖而无需添加特殊性。兼容性currentColor通常被称为“第一个CSS变量”，currentColor是一个等于元素的颜色属性的值。它可用于将等于属性值的颜色分配给任何接受颜色值的CSS属性。它强制CSS属性继承颜色属性的值。此值有助于避免将相同的值分配给接受同一选择器中的颜色的多个CSS属性，例如边框颜色、背景、框阴影等。示例：如果我们需要统一每个段落的文本颜色、边框和阴影，我们可能会这样写：.green{color:darkgreen;border-left:5pxsoliddarkgreen;盒子阴影：5px5px10px深绿色；}.brown{颜色：darkgoldenrod;border-left:5pxsoliddarkgoldenrod;box-shadow:5px5px10pxdarkgoldenrod;}.red{颜色：暗红色;border-left:5pxsoliddarkred;盒子阴影：5px5px10px暗红色；但是使用currentColor我们可以这样写。box{border-left:5pxsolidcurrentColor;box-shadow:5px5px10pxcurrentColor;}.green{color:darkgreen;}.brown{color:darkgoldenrod;}.red{color:darkred;}CompatibilityCustomPropertiesAlternateValues自定义属性通过允许开发人员在他们的样式表中创建可重用的值，而不需要像SASS这样的CSS预处理器。自定义属性立即被采用并在今天广泛使用并产生巨大影响，尤其是在主题化和与JavaScript交互方面。但是很多人可能会忽略var函数的第二个参数，这个参数是作为自定义属性失效时应用的fallback选项。定义变量--以--开头，区分大小写的变量的定义必须有一个作用域，不能直接在外面定义，这点区别于scss和less:root{--myColor:blue;--颜色默认值：黑色；}使用变量var(variable_name,def_value)var第一个参数为变量名，第二个参数为找不到变量时的替代值div{background-color:var(--myColor,'red');我们还可以设置另一个变量作为备选值颜色：var(--myColor,var(--color-default));Interactivemediaqueries在创建响应式网站时，我们通常会基于屏幕尺寸假设来制作输入机制。我们假设屏幕尺寸1920px属于台式电脑或笔记本电脑，用户使用鼠标和键盘与网站进行交互，但是带有触摸屏或智能电视屏幕的笔记本电脑呢？这就是交互式媒体功能的用武之地，它允许我们根据主要输入机制——触摸、手写笔，鼠标指针等@media(pointer:fine){/*使用鼠标或手写笔*/}@media(pointer:coarse){/*touch*/}@media(hover:hover){/*可以悬停*/}@media(hover:none){/*不能悬停*/}scroll-padding实现固定表头时，页面锚点滚动链接导致固定表头覆盖部分内容。以前我们不得不使用JavaScript来解决这个问题并实现自定义滚动逻辑来解决固定的标题偏移量。如果标头高度在断点处发生变化，事情只会变得更加复杂，幸运的是我们不必再为此依赖JavaScript。我们可以使用标准CSS媒体查询指定和更改scroll-padding-top的值。html{scroll-padding-top:6rem;scroll-behavior:smooth;}我们还可以设置其他方向或使用正常的滚动填充。滚动填充：/*...*/；滚动填充顶部：/*...*/；滚动填充右：/*...*/；滚动填充底部：/*...*/;scroll-padding-left:/*...*/;兼容字体渲染选项相信大家都做过一些倒计时的场景，这里我们会发现如果渲染纯文本，会出现一个奇怪的现象————数字奇怪地跳了起来。造成这种现象的主要原因是每个数字的渲染宽度其实是不一样的。比如数字在变化的时候，整个文字也在左右跳动。这里我们可能会为每个数字包裹一层盒子，然后固定盒子的宽度，这样在数字剧中就可以避免这种情况，但这很麻烦。今天给大家介绍一个纯CSS方案，只需要一行CSS！font-variant-numeric:tabular-numstable-nums通过为所有数字字符设置相同的宽度来解决上述问题。再对比一下：兼容性
