一文读懂伪类与伪元素

·  阅读 601
一文读懂伪类与伪元素

本文内容整理总结自 MDN CSS选择器,了解更多内容请查看原文。

🔰 什么是伪类?

伪类是添加到选择器的 关键字 ,指定要选择的元素的特殊状态。

典型的伪类关键字

在大多数情况下,伪类都与基础选择器搭配使用,下述是伪类在一些典型场景下的应用。

:hover

指针在 <button> 上悬停,但没有激活它时,按钮颜色变为蓝色

    button:hover {
      color: blue;
    }
复制代码

注意: 在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

:not

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类negation pseudo-class)。

将所有不是<p>的元素颜色改为蓝色:

    body:not(p) {
      color: blue;
    }
    
    /* 实测下述代码没有效果 */
    :not(p) {
      color: blue;
    }
复制代码

注意: 在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

:first-child

给所有 <ul> 下的第一个 <li> 应用不同的样式

    ul li {
      color: blue;
    }
    ul li:first-child {
      color: red;
      font-weight: bold;
    }
复制代码

:active

:active 表示的是鼠标从按下到松开的时间,下述代码表示 <a> 在不同状态下的样式。

    a:link { color: blue; }          /* 未访问链接 */
    a:visited { color: purple; }     /* 已访问链接 */
    a:hover { background: yellow; }  /* 用户鼠标悬停 */
    a:active { color: red; }         /* 激活链接 */
复制代码

注意: :active 赋予的样式可能会被后声明的其他链接相关的伪类覆盖。为保证样式生效,需要把 :active 的样式放在所有链接相关的样式之后。

这种链接伪类先后顺序被称为 LVHA 顺序:link > :visited > :hover > :active

单独使用的伪类关键字

我们常见的伪类关键字的特征是以单个冒号:开头,跟随在基础选择器后面。

但是单独使用的伪类关键字也可以对页面产生效果, 例如:

通过 :focus 伪类,可以让任何元素获得焦点后的颜色变为红色。

    :focus {
      color: red;
    }
复制代码

更多伪类,见 MDN - 标准伪类索引

image.png

🔰 什么是伪元素?

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

与伪类相同,一个选择器中只能使用一个伪元素。但是,伪元素必须紧跟在语句中的基础选择器之后

例如,下述代码可以给页面中每个 <a> 标签前添加一个😃表情。

    a::before {
      content: "😃";
    }
复制代码

相比于伪类,伪元素的使用方式更加固定,其基本语法:

    selector::pseudo-element {
      property: value;
    }
复制代码

注意: 在书写伪元素时,你会见到单冒号 : 的写法,但此为CSS2过时语法,仅用于支持IE8,大多情况请书写双冒号 :: 来表示伪元素。

更多伪元素见 MDN - 标准伪元素索引

image.png

📌 伪类与伪元素共同使用

下面一个案例中,同时用到了伪类和伪元素:

用CSS实现一个开关样式,hover时触发,滑块为正方形,具体大小可随意,如下图

image.png

尽量实现如下要求,可实现一部分:

  1. 开关动作均有动画过度(滑块移位、背景色)
  2. 只用一个dom元素实现
  3. 开关的高度是固定的,但宽度不固定,即宽度为未知父元素的100%,宽度始终大于高度

题目解读

由于只能使用一个 DOM 元素,而要区分滑块和背景的不同状态,故使用伪元素 ::before.box 内部添加一个滑块,滑块采用 inline-block 方式展示,并且由 transition 属性指定过渡动画。

对于背景也采用了 transition 来指定过渡动画,并且二者都通过 :hover 触发。

image.png

实现代码

HTML

    <div class="father">
      <div class="box"></div>
    </div>
复制代码

CSS

    .box {
      height: 50px;
      width: 100%;
      background-color: #c2d3e4;
      transition: background-color 0.25s
    }

    .box::before {
      content: "b";
      color: white;
      display: inline-block;
      background-color: white;
      position: relative;
      top: 5px;
      left: 5%;
      height: 40px;
      width: 35%;
      transition: left 0.25s;
    }

    .box:hover {
      background-color: #348fe4;
    }

    .box:hover::before {
      left: 60%;
    }
    
    /* 父元素宽度任意 */
    .father {
      width: 100px;
    }
复制代码

代码片段

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改