目标伪类选择器

E:target选择匹配E的所哟元素,且匹配元素被相关url指向

鼠标点击右边京东秒杀跳转到京东秒杀div,并变成黄色

html 复制代码
<!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;
            position: fixed;
            right: 0px;
            top:100px;
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 5px solid blue;
            
        }

        div{
            height: 600px;
            border:5px solid red;
            /* background:yellow; */
        }


        div:target{
            /* E:target选择匹配E的所哟元素,且匹配元素被相关url指向鼠标点击到 */
            background: yellow;
        }


        /* 锚点作用:页面不同区域的跳转, 使用a链接。 
           <a href="#锚点名字"></a>

           <div id="锚点名字"></div>

        */
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#a">京东秒杀</a>
        </li>
        <li>
            <a href="#b">双11</a>
        </li>
        <li>
            <a href="#c">频道优选</a>
        </li>
        <li>
            <a href="#d">特色广场</a>
        </li>
    </ul>

    <div id="a"> 
        京东秒杀
    </div>
    <div id="b">
        双11
    </div>
    <div id="c">
        频道优选
    </div>
    <div id="d">
        特色广场
    </div>
    
</body>
</html>
相关推荐
wkj001几秒前
php中调用对象的方法可以使用array($object, ‘methodName‘)?
android·开发语言·php
q567315235 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple12 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua18 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风19 分钟前
录音实时上传
前端·javascript
江号软件分享23 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
hudawei99629 分钟前
kotlin中withContext,async,launch几种异步的区别
android·开发语言·kotlin
灵犀学长32 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
消失的旧时光-194332 分钟前
Kotlin 常用语法糖完整整理
android·开发语言·kotlin
每次的天空37 分钟前
Android-重学kotlin(协程源码第一阶段)新学习总结
开发语言·学习·kotlin