目标伪类选择器

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>
相关推荐
伍哥的传说几秒前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding8 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜10 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD10 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding11 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
斐波娜娜12 分钟前
Maven详解
java·开发语言·maven
鱼 空14 分钟前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子81624 分钟前
scroll-marker轮播组件不再难
前端·css
小码氓35 分钟前
Java填充Word模板
java·开发语言·spring·word