目标伪类选择器

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>
相关推荐
Swift社区3 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
没头脑的ht3 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht3 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20243 小时前
Swift 数组
开发语言
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
stm 学习ing4 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js