详解：: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>

详解：:target 2

相关文章

详解：tab 3

详解：:root 4

详解： 7案例，浮动排列

详解： 8，连续和不连续最后与开始的选择器

详解：9only-child only-of-type

详解：:empty 10

详解： :not 11三种写方式

详解： :hover 12 三种方式唉，累死我了看评论啊啊啊

详解：:enable（启用） 13

看:hover之后必看核心写错了:hover那里，我现在重新写最核心的地方哈