《精彩绝伦的CSS》——选择器（二）为“目标”元素添加样式（:target）

二、为“目标”元素添加样式（: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的元素背景跟前景色都发生了变化