谁动了我的选择器？深入那些小众又好用的css选择器
01 前言
选择器是开发网站写样式时必须用到的知识点，如果你有关注css每年的发展状态报告的话，不难发现，这几年出现了很多很好用的css选择器。css选择器发展到今日，可以说是一个非常庞大的体系了，接下来我主要聊聊那些好用却又很少被人熟知的选择器。
02 :is() 和 :where()
先来看 :is() 和 :where()。Elad Shechter 曾在推特上发了一个关于 :is() 和 :where() 选择器的测试题：如果你是第一次看到这样的测试题，请先自测一下，如果是你，你会选择哪个答案(green，purple，red 还是 blue)?
如果你选择的是 purple ，那么要恭喜你，你答对了。
示例中出现了 :is() 和:where() 两个可能你从未接触过的伪类选择器,那么这两个选择器是什么，有什么作用呢?:is()：伪类将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。:where()：伪类接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。:is() 和 :where() 的区别：:where()：的优先级总是为0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。接下来我们通过一些简单的案例来感受一下:is()选择器的优点。
03 在没有:is()之前的写法
案例一
案例二
04 使用:is() 之后的写法
案例一
案例二使用:is() 代码就会显得更简洁
05 :not()
相信大家平时在开发前端页面的时候，碰到类似下图这样的需求：
希望最后一张卡片没有margin-bottom（或第一张卡片没有 margin-top。针对于这样的场景，:not() 选择器就非常有优势。为什么这么说呢？
在没有 :not() 选择器的时候，你可能会想到下面这样的方式：
如果换成 :not() 选择器，可以这要来实现：
06 :has()
:has()选择器是匹配含指定元素的父元素
虽然 CSS 选择器已经非常强大了，但一直以来，在 CSS 中没有通过子元素选到父元素的样的选择器(父选择器)之前看到一些文章，希望能有一个:parents() 这样的选择器，虽然直到目前为止还没有 :parents() 选择器，但庆幸的是，:has() 选择器即将到来，它可以用来选择父级元素。
在支持:has()的浏览器中，你将看到下图这样的效果：
07 :focus-visible 和 :focus-within
大家伙对于:focus应该不会感到陌生，早期对于可聚焦元素可以使用 :focus 来给元素设置焦点状态下的 UI 风格，即焦点环样式：
虽然 :focus 、:focus-within 和 :focus-visible 都可以用来设置焦点环的样式，但他们之间还是有一定的差异：
:focus ：当用户使用鼠标点击焦点元素或使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式。
:focus-visible：只有使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式。如果仅使用 :focus-visible 设置焦点环样式的话，那么用户使用鼠标点击焦点元素时不会触发焦点环样式。
:focus-within：表示一个元素获得焦点，或该元素的后代元素获得焦点。这也意味着，它或它的后代获得焦点，都可以触发 :focus-within。
你会发现，分别使用鼠标点击按钮和按Tab 让按钮获得焦点时焦点环样式效果不同：
不过需要注意的是，:focus 和 :focus-visible 也会涉及到选择器权重的问题，就上面的示例来说，如果我们把 :focus 选择器对应的样式放置到 :focus-visible之后：
这个时候，你会发现不管用户使用键盘 Tab 键还是鼠标让 <button> 获得焦点时，焦点样式都会采用:focus对应的样式：
对于:focus-within而言，它其实有点类似于 :has()伪类选择器，可以在子元素得到焦点时，触发父元素
更简单的说，它有点类似于 JavaScript 的事件冒泡，从可获得焦点元素开始一直冒泡到HTML的根元素 <html> ，都可以接收触发 :focus-within事件。
示列：
当button按钮获取焦点时候得到一下效果：
08 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track
PC端网页基本都存在滚动条，但是很多场景下，其实用户已经很少需要用鼠标去特意选中或者下拉滚动条，但多数只是给用户以提醒页面还有很长的作用，所以默认的滚动条，太明显且样式不符合网站的要求，很多情况需要弱化滚动条的宽度和颜色，尽可能低减少滚动条对网页效果的侵入。
在自定义滚动条之前，我们先了解滚动条的组成，我们具体要去设置滚动条那些部位，大部分我们只需要设置滚动条的两个部位-滚动条轨道和滚动拇指。
不管是滚动轨道还是滚动拇指基本都设设置宽度和对应的颜色，那具体使用什么来设置了，那就了解一下几个伪元素选择：
::-webkit-scrollbar：用于定义整个滚动条的样式，包括宽度和背景颜色；
::-webkit-scrollbar-track：用于定义滚动条轨道的样式，包括轨道的颜色等；
::-webkit-scrollbar-thumb：用于定义滑块的样式，包括滑块的背景颜色和圆角等。
实现具体代码如下：
效果如下：
好了先到聊到这里啦，希望这篇文章能给大家一些帮助吧，看似css是开发中最简单的知识点，确实也是最简单的，但往往最简单的也是最容易被忽略的，其实css也是能实现一些意想不到却很强大的功能。
