css3中伪类选择器:target的使用

冷不防 2022-07-26 00:12 190阅读 0赞

参考资料　CSS3 target伪类简介

今天由于在做任务13，里面有一个子任务是要求用css写出一个简单的图片轮播，刚开始真的是完全没有思路，想着不用js怎么绑定点击事件呢，看了别人的一些实现方法，发现`:target`是一个神奇的东西。

**如果想看用css3实现的图片轮播，狠狠点击这里**demo

刚开始接触`:target`时，真的是一头雾水，觉得这个是个什么东西，怎么能处理点击事件呢。看了差不多五六篇博客还有简介吧，突然醒悟，这不就也是一个选择器嘛，只不过功能高大上了点而已。  
具体说明高大上功能之前，先来“接地气”的说一下基本概念：

> 它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”\#”字符，然后后面带有一个标志符名称，比如\#respond，target就是用来匹配ID为respond的元素的。

那它的功能到底高大上在哪呢，就是它可以根据你当前的点击的元素动态的有选择性的链接到对应的元素上，比如下面的代码块

不要被这个嵌套了n多层div的代码吓到了啊，其实这是用css实现图片轮播的无奈之举，因为没有选择父级的选择器。好，现在点击**1**，那么文档就会自动定位到\#img1，也就是id为img1的div元素。同理，点击**2**，文档就会自动定位到id为img2的div元素。定位到id为img2的div元素，就**相当于用ID选择器`#img2`定位**。

这样接下来再想选择什么元素就随心所欲了，比如选择类名为mainImg的div元素，就可以这么写`#img1:target .mainImg` 表示的是当目标元素为`#img1`时,它的子元素`.mainImg`的样式变化。