css 中target的用法

在CSS中，我们常常会用到伪类，其中一个比较常见的伪类就是:target。那么这个伪类的作用是什么呢？

:target {
/*样式*/}
    

首先，我们需要明确一个概念——锚点。锚点是指在页面中设置的具有特定ID的元素。当我们点击网页上的链接时，如果链接中href属性指向了某个具有ID的元素，点击后浏览器会自动滚动到该元素的位置，这个过程就称为跳转或锚点跳转。

而:target伪类就是用来根据URL中的锚点，为对应的元素添加样式的。

比如我们有这样一个HTML代码：

!DOCTYPE html>
    html>
    head>
    title>
    :target伪类/title>
    /head>
    body>
    div id="box1">
    /div>
    div id="box2">
    /div>
    /body>
    /html>
    

我们可以为页面中的两个box元素分别设置锚点链接：

a href="#box1">
    跳转到box1/a>
    a href="#box2">
    跳转到box2/a>

当我们点击这两个链接时，页面会自动跳转到对应的元素位置，并触发:target伪类，此时我们就可以为该元素添加一些样式：

#box1:target {
    background-color: red;
}
#box2:target {
    background-color: blue;
}
    

这样就可以在点击对应链接后，为对应的元素添加一个背景色了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！