详解：:target 2
核心是：找到并且匹配然后显示效果 怎么找？ 通过id 这样说好像太裸铜了把。
<li><a href="#p1">李文1</a></li>记住：#代表要找的为id，p1代表要找到是什么，知道把，记住。是往下找的哈，记住#代表id哈 找到了之后怎么匹配？ 找到了id为p1的之后，就要看看有没有.chapter的了，有就能显现效果了 为什么就能直接显现效果了呢？ 因为:target代表动的时候就触发了哈
.chapter:target怎么显示效果？
border: 1px solid red;
color: blue;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.chapter:target/*意思是可用于点击的当前的目标元素*/
{/*再有所有.chapter的class中找出点击的目标元素*/
border: 1px solid red;
color: blue;
}
</style>
</head>
<body>
核心根据#代表找id为什么
<h3>陈业贵</h3>
<h2>陈业贵</h2>
<ul class="chapterList">
<li><a href="#p1">李文1</a></li>
<li><a href="#p2">李文2</a></li>
<li><a href="#p3">李文3</a></li>
<li><a href="#p4">李文4</a></li>
<li><a href="#p5">李文5</a></li>
</ul>
<h3 id="p1" class="chapter">李文1</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p2" class="chapter">李文2</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p3" class="chapter">李文3</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p4" class="chapter">李文4</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p5" class="chapter">李文5</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/04/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
