在 HTML 中,大家经常会使用<div>
元素来进行布局。利用:target
伪类,大家可以使被选中的<div>
元素更加突出。下面是一个简单的例子:
<div id="box">偶是一个div元素!</div> <p>点击下面的链接,来看看如何使用 :target 这个神奇的伪类!</p> <a href="#box">点击这里</a>
在这个例子中,大家给<div>
元素设置了一个 ID 名称为"box"
,并在网页的其它地方添加了一个链接。当大家点击这个链接时,可以看到<div>
元素变成了更加醒目的蓝色。这是因为大家在 CSS 中通过:target
伪类来设置了它的样式:
#box:target { background-color: blue; color: #fff; }
通过这个例子,大家可以看到:target
伪类的强大之处。它可以帮助大家快速实现一些网页中常见的效果,例如侧边栏点击后高亮显示、网页内部链接点击后滑动到对应位置等等。