谁动了我的选择器？深入那些小众又好用的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()之前的写法

案例一

section h2, article h2, aside h2, nav h2 {
  font-size: 25px;
}

案例二

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

04 使用:is() 之后的写法

案例一

:is(section,article,aside,nav) h2{
  font-size: 25px;
}

案例二使用:is() 代码就会显得更简洁

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}

05 :not()

相信大家平时在开发前端页面的时候，碰到类似下图这样的需求：

希望最后一张卡片没有margin-bottom（或第一张卡片没有 margin-top。针对于这样的场景，:not() 选择器就非常有优势。为什么这么说呢？
在没有 :not() 选择器的时候，你可能会想到下面这样的方式：

.card {
  margin-bottom: 20px;
}
/*选择最后一个元素设置margin-bottom为0*/
.card:last-child {
  margin-bottom: 0;
}

如果换成 :not() 选择器，可以这要来实现：

/*除了最后一个其他的card都设置margin-bottom：20px*/
.card:not(:last-child) {
  margin-bottom: 20px
}

06 :has()

:has()选择器是匹配含指定元素的父元素

虽然 CSS 选择器已经非常强大了，但一直以来，在 CSS 中没有通过子元素选到父元素的样的选择器(父选择器)之前看到一些文章，希望能有一个:parents() 这样的选择器，虽然直到目前为止还没有 :parents() 选择器，但庆幸的是，:has() 选择器即将到来，它可以用来选择父级元素。

<section>
  <h1>H1 Level Title</h1>
</section>  
<section>
  <h1>H2 Level Title</h1>
</section>  
<section>
  <p>Text Paragraphs</p>
</section>  

// 将匹配含有h1子元素的 section元素
section:has(h1) {
  border-color: blue;
}
// 将匹配含有h2子元素的 section元素
section:has(h2) {
  border-color: #09f;
}
// 将匹配含有p子元素的 section元素
section:has(p) {
  border-color: red;
}

在支持: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。

button:focus { 
  outline: 2px dotted #09f; 
  outline-offset: 2px; 
} 

button:focus-visible { 
  outline: 2px solid #f36; 
  outline-offset: 2px; 
}

你会发现，分别使用鼠标点击按钮和按Tab 让按钮获得焦点时焦点环样式效果不同：

不过需要注意的是，:focus 和 :focus-visible 也会涉及到选择器权重的问题，就上面的示例来说，如果我们把 :focus 选择器对应的样式放置到 :focus-visible之后：

这个时候，你会发现不管用户使用键盘 Tab 键还是鼠标让 <button> 获得焦点时，焦点样式都会采用:focus对应的样式：

对于:focus-within而言，它其实有点类似于 :has()伪类选择器，可以在子元素得到焦点时，触发父元素

更简单的说，它有点类似于 JavaScript 的事件冒泡，从可获得焦点元素开始一直冒泡到HTML的根元素 <html> ，都可以接收触发 :focus-within事件。

示列：

<!-- html结构 -->
<div class="box">
   <div class="nav">
     <button>click button</button>
   </div>
</div>

/* css */
.box {
  width: 300px;
  height: 300px;
}

.nav {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:focus-within {
  background-color: pink;
}
.nav:focus-within {
  background: orange;
}
body:focus-within {
  background-color: #2a0f5bde;
}
button:focus-within {
  outline: 1px solid #f36;
  outline-offset: 2px;
}

当button按钮获取焦点时候得到一下效果：

08 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track

PC端网页基本都存在滚动条，但是很多场景下，其实用户已经很少需要用鼠标去特意选中或者下拉滚动条，但多数只是给用户以提醒页面还有很长的作用，所以默认的滚动条，太明显且样式不符合网站的要求，很多情况需要弱化滚动条的宽度和颜色，尽可能低减少滚动条对网页效果的侵入。

在自定义滚动条之前，我们先了解滚动条的组成，我们具体要去设置滚动条那些部位，大部分我们只需要设置滚动条的两个部位-滚动条轨道和滚动拇指。

不管是滚动轨道还是滚动拇指基本都设设置宽度和对应的颜色，那具体使用什么来设置了，那就了解一下几个伪元素选择：

::-webkit-scrollbar：用于定义整个滚动条的样式，包括宽度和背景颜色；
::-webkit-scrollbar-track：用于定义滚动条轨道的样式，包括轨道的颜色等；

::-webkit-scrollbar-thumb：用于定义滑块的样式，包括滑块的背景颜色和圆角等。

实现具体代码如下：

/* 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的 */
::-webkit-scrollbar {
  width: 10px;
  /*height对于纵向滚动条来说没有用，但是对于横向就有用了*/ 
  /*height: 10px; */
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
   background-color: rgb(144, 198, 239);
}

/* 轨道 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgb(243, 234, 234);
}

效果如下：

好了先到聊到这里啦，希望这篇文章能给大家一些帮助吧，看似css是开发中最简单的知识点，确实也是最简单的，但往往最简单的也是最容易被忽略的，其实css也是能实现一些意想不到却很强大的功能。