让页面内的某个元素“动”起来：::target-text选择器妙用

了解一下 ::target-text 选择器

最近在 MDN 官网看到了一个从未见过的选择器，::target-text。简单研究了一下，觉得还有点意思，也有点实际用处，现在分享一下。

一、::target-text 是干什么的

想必大家都用过锚点链接，原理很简单，就是通过给某个元素一个ID，然后在 a 标签的 href 中引用这个 ID，就可以实现点击 a 标签后直接跳转到该元素的位置。

::target-text 选择器就是基于锚点链接的，它可以选中带有锚点链接的元素。具体来说，::target-text 选择器会选中那些在当前页面中被锚点链接指向的元素。

二、::target-text 选择器有什么用？

::target-text 选择器可以用来给带有锚点链接的元素添加样式。比如，我们可以用 ::target-text 选择器来给带有锚点链接的元素添加背景颜色，或者给带有锚点链接的元素添加边框。

::target-text 选择器还可以用来实现一些很酷的效果。比如，我们可以用 ::target-text 选择器来实现一个带有锚点链接的元素在点击后动起来的效果。

三、::target-text 选择器怎么用？

::target-text 选择器的语法很简单，就是::target-text { }。

比如，我们可以用以下代码来给带有锚点链接的元素添加背景颜色：

::target-text {
  background-color: #FF0000;
}

我们也可以用以下代码来给带有锚点链接的元素添加边框：

::target-text {
  border: 1px solid #FF0000;
}

如果我们想实现一个带有锚点链接的元素在点击后动起来的效果，我们可以用以下代码：

::target-text {
  animation: my-animation 2s infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

四、::target-text 选择器兼容性

::target-text 选择器是一个比较新的选择器，它在所有现代浏览器中都得到了很好的支持。但是，它在 IE 11 中不受支持。

五、::target-text 选择器总结

::target-text 选择器是一个非常有用的选择器，它可以用来给带有锚点链接的元素添加样式，或者实现一些很酷的效果。::target-text 选择器的语法很简单，就是::target-text { }。::target-text 选择器在所有现代浏览器中都得到了很好的支持，但是在 IE 11 中不受支持。