对CSS3伪类选择器 target的应用

最新推荐文章于 2023-06-29 17:29:19 发布

VIP文章 HzZyYYY

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量526

点赞数 1

本文链接：https://blog.csdn.net/qq_44820039/article/details/105604846

版权

最近学习了CSS3认识到了很多新的选择器，我发现一个好玩的的伪元素选择器—— :target 。

首先介绍target，然后在写两个小案例。

定义和用法：
#锚点的名称是在一个文件中连接到某个元素的URL。元素被链接到目标元素。
:target选择器可用于当前活动的target元素的样式

语法：

:target{
   
  css语法
}

案例：
一、点击图片切换
在学习 :target 之前这个是需要配合JS完成的，在学习之后只要写CSS代码即可实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }
        ul{
   
           list-style: none; 
        }
        .wrapper{
   
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 20px auto;
            position: relative;
            background: aliceblue;

        }
        .pic-box{
   
            width: 100%;
            height: 100%;
           list-style: none;
           position: relative;
        }
        .img{
   
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
        }
        .img1{
   
            background-image: url(imgs/01.jpeg);
        }
        .img2{
   
            background-image: url(imgs/02.jpeg);
        }
        .img3{
   
            background-image: url

最低0.47元/天解锁文章

HzZyYYY

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对CSS3伪类选择器 target的应用

最近学习了CSS3认识到了很多新的选择器，我发现一个好玩的的伪元素选择器—— :target 。首先介绍target，然后在写两个小案例。定义和用法：#锚点的名称是在一个文件中连接到某个元素的URL。元素被链接到目标元素。:target选择器可用于当前活动的target元素的样式语法：:target{ css语法}案例：一、点击图片切换在学习 :target 之前这个是...
复制链接

扫一扫