页面内锚点跳转+目标伪类选择器

最新推荐文章于 2023-05-10 00:29:14 发布

颜妮儿

最新推荐文章于 2023-05-10 00:29:14 发布

阅读量349

点赞数

文章标签： css sass html

本文链接：https://blog.csdn.net/Z__XY_/article/details/122457537

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

页面内跳转的锚点设置的两种方式：
一：

<a href="#xxx">名称</a>
目标模块：<h3 id="xxx">这是锚点指向的模块/h3>

二：

<a href="#xxx">名称</a>
目标模块：<a name="xxx">这是锚点指向的模块/h3>

用 :target伪类选择器用来选择选中的目标模块，进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标伪类选择器</title>
    <style>
        .first{
            background-color: #ccc;
            height: 300px;
        }
        .second{
            background-color: rgb(20, 233, 48);
            height: 300px;
        }
        .third{
            background-color: rgb(20, 35, 238);
            height: 300px;
        }
        :target{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 页内跳转锚点设置方式一 -->
    <ul>
        <li><a href="#first">第一个锚点</a></li>
        <li><a href="#second">第二个锚点</a></li>
        <li><a href="#third">第三个锚点</a></li>
        
    </ul>
    <h3 class="first" id="first">这是第一个锚点指向的目标位置</h3>
    <h3 class="second" id="second">这是第二个锚点指向的目标位置</h3>
    <h3 class="third" id="third">这是第三个锚点指向的目标位置</h3>

    <!-- 页内跳转锚点设置方式二 -->
    <ul>
        <li><a href="#first2">第一个锚点</a></li>
        <li><a href="#second2">第二个锚点</a></li>
        <li><a href="#third2">第三个锚点</a></li>
        
    </ul>
    <h3 class="first"><a name="first2">这是第一个锚点指向的目标位置</a></h3>
    <h3 class="second"><a name="second2">这是第二个锚点指向的目标位置</a></h3>
    <h3 class="third"><a name="third2">这是第三个锚点指向的目标位置</a></h3>
</body>
</html>

颜妮儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面内锚点跳转+目标伪类选择器

页面内跳转的锚点设置的两种方式：一：<a href="#xxx">名称</a> 目标模块：<h3 id="xxx">这是锚点指向的模块/h3>二：<a href="#xxx">名称</a> 目标模块：<a name="xxx">这是锚点指向的模块/h3>用 :target伪类选择器用来选择选中的目标模块，进行样式设置。<!DOCTYPE html><html lang="en"&.
复制链接

扫一扫