「这是我参与11月更文挑战的第十六天，活动详情查看：2021最后一次更文挑战」。

往期链接：

「CSS之选择器」

「CSS之选择器（二）」

「CSS之选择器（三）」

前言

终于，经过我们前几天的章节的总结，选择器的分类算是总结完了，大家可以来回查阅，巩固自己的知识。

那我们为什么要用选择器呢？接下来就让我们来好好说道说道。

为什么要用选择器？

我们知道在现在书写CSS样式的时候基本全是各种各样的类，那我们为什么还要用选择器呢？

首先，

• 使用选择器可以完成一些只能通过JS实现的效果，这样就可以减少对DOM的操作。

• 还可以减少一些无用或者少用的类，避免标签上全是各种各样的类。

接下来，我们就来看一下几个常用和具有的选择器。

:hover

:hover:用作鼠标悬浮的样式，可以说是我们开发中非常常用了，而且非常方便。在一些场景下，还可以代替mouseenter和mouseleave两个鼠标事件，再加上css的动画，简直完美。

结合attr()我们可以实现很有趣的东西。

代码如下：

// html
<ul class="hover-tabs">
  <li data-name="红"></li>
  <li data-name="橙"></li>
  <li data-name="黄"></li>
  <li data-name="绿"></li>
  <li data-name="青"></li>
  <li data-name="蓝"></li>
</ul>

// css
$color-list: red orange yellow green greenyellow blue;
.hover-tabs {
  margin: 200px 100px;
  display: flex;
  justify-content: space-between;
  width: 200px;
  li {
    position: relative;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background-clip: content-box;
    cursor: pointer;
    transition: all 300ms;
    &::before,
    &::after {
      position: absolute;
      left: 50%;
      bottom: 100%;
      opacity: 0;
      pointer-events：none;
      transform: translate3d(0, -30px, 0);
      transition: all 300ms;
    }
    &::before {
      margin: 0 0 12px -35px;
      border-radius: 5px;
      width: 70px;
      height: 30px;
      background-color: rgba(#000, .5);
      line-height: 30px;
      text-align: center;
      color: #fff;
      content: attr(data-name);
    }
    &::after {
      margin-left: -6px;
      border: 6px solid transparent;
      border-top-color: rgba(#000, .5);
      width: 0;
      height: 0;
      content: "";
    }
    @each $color in $color-list {
      $index: index($color-list, $color);
      &:nth-child(#{$index}) {
        background-color: $color;
        &:hover {
          border-color: $color;
        }
      }
    }
    &:hover {
      &::before,
      &::after {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}

好，今天就到这里了，拜了个拜，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！