CSS之选择器(四)

·  阅读 65
CSS之选择器(四)

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

往期链接:

CSS之选择器

CSS之选择器(二)

CSS之选择器(三)

前言

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

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

为什么要用选择器?

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

首先,

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

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

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

:hover

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

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

hover.gif

代码如下:

// 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!!!

分类:
前端
标签:
分类:
前端
标签: