CSS3 选择器target

UIEngineer

于 2018-02-18 14:32:22 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5/CSS3

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/79334547

HTML5/CSS3 专栏收录该内容

35 篇文章

订阅专栏

本文通过一个简单的实例展示了如何使用 CSS 的 :target 伪类来改变页面中被链接指向的目标元素的样式。该效果常用于创建锚点链接或者简单的导航菜单。当用户点击某个链接并跳转到相应的部分时，该部分的背景颜色会发生变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    /* target */
    :target{
        background-color:orange;
    }
</style>
</head>

<body>

    <a href="#a1">菜单1</a>|
    <a href="#a2">菜单2</a>|
    <a href="#a3">菜单3</a>|
    <a href="#a4">菜单4</a>
    <div id="a1">
        <h1>菜单1</h1>
        <p>菜单1内容</p>
    </div>
    <div id="a2">
        <h1>菜单2</h1>
        <p>菜单2内容</p>
    </div>
    <div id="a3">
        <h1>菜单3</h1>
        <p>菜单3内容</p>
    </div>
    <div id="a4">
        <h1>菜单4</h1>
        <p>菜单4内容</p>
    </div>

</body>
</html>

这里写图片描述