CSS 逻辑伪类选择器和自定义变量介绍

一、逻辑伪类选择器及使用场景介绍

1、选择器的作用

        CSS 选择器通常用于锁定某个元素为其赋予特殊样式，比如：

• 找到列表中第一项使其高亮

• 为表格单数行增加背景色

        但实际业务场景往往更加复杂，比如：想要当输入框聚焦时令所在容器（父元素）边框高亮、对于想要通过 .flex 覆盖 .ant-tab-tabpanel.active 的样式因优先级不够而无效，至少得用 .flex.ant-tab-tabpanel 还得放在 .ant-tab-tabpanel.active 之后才会生效等问题。其实 CSS 早已提供诸如 :has、:is、:where、:not等逻辑组合伪类以供使用，了解它们将大有裨益。

2、父类选择器 :has()

        针对上述“想要当输入框聚焦时令所在容器（父元素）边框高亮”的问题，过去找遍所有选择器都不知道该如何实现，最终只得利用 js 来完成功能。:has() 提供一种针对引用元素选择父元素或者先前兄弟元素的方法。比如：

        上述“想要当输入框聚焦时令所在容器（父元素）边框高亮”的问题，就可以通过如下 CSS 实现