CSS3 伪类(:target)(配合锚点使用)

最新推荐文章于 2024-04-16 16:18:11 发布

houyanhua1

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/houyanhua1/article/details/79636673

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		ul {
			position:fixed;
			top: 100px;
			left: 20px;
		}

		div {
			width: 800px;
			margin: 0 auto;
		}

		/* :target 配合锚点使用,点击锚点时,target就被激活了(多个锚点只有一个被激活) */
		h2:target {
			color:red;
		}
	</style>

</head>
<body>
	<ul>
		<li><a href="#1">标题1</a></li>
		<li><a href="#2">标题2</a></li>
		<li><a href="#3">标题3</a></li>
		<li><a href="#4">标题4</a></li>
		<li><a href="#5">标题5</a></li>
	</ul>
	<div>
		<h2 id="1">标题1</h2>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>

		<h2 id="2">标题2</h2>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>

		<h2 id="3">标题3</h2>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>

		<h2 id="4">标题4</h2>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>

		<h2 id="5">标题5</h2>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
		<p>pppppppppppppp</p>
	</div>
</body>
</body>
</html>

houyanhua1

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3 伪类(:target)(配合锚点使用)

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; ul { position:fixed;
复制链接

扫一扫

专栏目录