目标伪类选择器

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>
相关推荐
潜心编码7 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
神奇的小猴程序员7 小时前
Mutantcat Web Pdf Reader —— 开源、轻量、安全的网页 PDF 阅读器
前端·pdf
三小河7 小时前
React Vite 中动态批量导入路由
前端·vue.js
ceclar1237 小时前
C++Lambda表达式
开发语言·c++·算法
Qinana8 小时前
📚 论如何用代码谈一场不露脸的恋爱
前端·前端框架·html
二进制coder8 小时前
深入浅出:I²C多路复用器PCA9546详解 - 解决地址冲突,扩展你的I²C总线
c语言·开发语言·单片机
Forfun_tt8 小时前
xss-labs pass-10
java·前端·xss
T___T8 小时前
从 "送花被拒" 到 "修成正果":用 JS 揭秘恋爱全流程中的对象与代理魔法
前端·javascript
三小河8 小时前
从私服版本冲突到依赖治理:揭秘 resolutions 配置
前端·javascript·架构
Mapmost8 小时前
你的3DGS数据为何难以用在项目里?Web端开发实战指南
前端