电商是什么一般是干嘛的,seo黑帽教学网,lnmp和wordpress,网站页面设计图片素材公众号#xff1a;程序员白特#xff0c;欢迎一起交流学习~ 原文#xff1a;CSS整洁之道——:is()、:where()和:has()的用法 - 掘金 (juejin.cn) 让我们写出优雅界面的CSS#xff0c;它也总是把自己进化得更加优雅。
今天我们花5分钟时间学习三个优雅的CSS伪类#xff1a… 公众号程序员白特欢迎一起交流学习~ 原文CSS整洁之道——:is()、:where()和:has()的用法 - 掘金 (juejin.cn) 让我们写出优雅界面的CSS它也总是把自己进化得更加优雅。
今天我们花5分钟时间学习三个优雅的CSS伪类:is()、:where() 和 :has()。
:is() - 取代组合选择器
:is() 允许你在一个规则中包含多个选择器。它接受一组选择器作为参数并应用样式到匹配的元素上。
ul li a,
ol li a,
nav ul li a,
nav ol li a { color: blue;
}
/* 使用 :is() */
:is(ul, ol, nav ul, nav ol) li a { color: blue;
}:is() 可以简化多层嵌套和多种选择器组合的写法让你维护样式更方便。
:is() 优先级依然遵循CSS选择器的优先级规则即 ID - 类 - 元素 的顺序。
:is(.class1) a {color: blue;
}
:is(#id1) a {color: red;
}这段代码里两条规则如果命中相同的元素那么第二条会优先应用。
:is() 的参数也可以传一个匹配规则
:is([class^is-styling]) a {color: yellow;
}这样的写法会匹配所有 class 开头是 is-styling 的选择器。
:where() - 拥有最低优先级
:where() 和 :is() 相似都可以传入选择器或者匹配规则来简化你的CSS代码。
:where([class^where-styling]) a {color: yellow;
}但和 :is() 不同的是:where() 拥有最低优先级这样的好处是它定义的样式规则不会影响其他样式规则避免了样式冲突。
/* footer classwhere-styling……/footer */
footer a {color: green;
}
:where([class^where-styling]) a {color: red
}当有其他规则和 :where() 同时被命中时:where() 一定是失效的。所以上面这个例子实际效果是链接显示绿色。
:has() - 基于其他元素进行匹配
:has() 可以根据直接后代元素的存在来匹配元素
/* 选择直接包含 p 元素的 div */
div:has( p) {border: 1px solid black;
}也可以根据紧邻的下一个兄弟元素来匹配元素
/* 选择后面跟着 p 元素的 div */
div:has( p) {border: 1px solid black;
}你还可以把它跟其他伪类一起使用比如 :has() 和 :is() 一起使用
:has() 使用场景很多只要是强互动的页面都可能用到以后有机会单独分享一篇
总结
大部分浏览器的新版本都已支持 :is()、 :where() 和 :has() 这三个伪类了如果你的项目跑在低版本的浏览器中那么需要考虑一下回退策略。
