二、为“目标”元素添加样式(:target)
有时候我们希望指向文档中某一具体片段时,通常会使用到锚点(anchor)来实现,比如跳转到某一页面的id为LLL-target的元素:
<a href="url#LLL-target">head to LLL-target</a>
其中url为该页面具体url,这样点击该a标签就会自动跳转到指定元素
这样的话会有个不够人性化的方面,就是跳转过去不会有任何提示,视觉上该元素并没有突出显示,对于这种情况就可以使用:target伪类
看下面例子:
样式部分:
#LLL-target:not(:target){ color: black; background: none; } #LLL-target:target{ color: deeppink; background: blue; }
页面部分:
<h3>这是跟下面那个做对比的</h3> <h3 id="LLL-target">这是待会会跳到的target</h3> <h3><a name="LLL-target">用name做锚点不合适</a></h3> <div style="height: 800px;width: 100%;background-color: green"></div>
<a href="#LLL-target">点这里看效果</a>
运行后点击最后的“点这里看效果”,明显可以看出id为LLL-target的元素背景跟前景色都发生了变化