CSS | :目标选择器

CSS的目标选择器是一种特殊的选择器，用于选取包含特定ID的锚点元素。

语法

:target {
    /*样式属性*/
}

介绍

目标选择器允许您为当前页面中的某个特定部分应用样式。例如，在页面上有一个“返回顶部”的链接，当用户单击该链接时，页面将滚动到页面顶部。该链接可能如下所示：

<a href="#top">返回顶部</a>

在这个例子中，“#top”是一个锚点，它指向页面的顶部。当用户单击链接时，页面将滚动到这个锚点。同时，“:target”目标选择器可用来为这个锚点设置样式。

为了应用样式，您需要在CSS中使用目标选择器。例如，下面的样式可以使锚点在点击后呈现为黄色：

:target {
    background-color: yellow;
}

示例

您可以使用目标选择器来实现很多有趣的效果。下面是一些示例：

点击弹出框

<button onclick="document.getElementById('pop-up').style.display='block'">打开弹出框</button>

<div id="pop-up" style="display:none">
    <a href="#close" class="close">关闭</a>
    <p>这是一段弹出框中的文本。</p>
</div>

<style>
    :target {
        display: block;
    }

    #pop-up {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 200px;
        margin-top: -100px;
        margin-left: -150px;
        background-color: white;
        border: 1px solid black;
        padding: 10px;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
    }
</style>

这个示例展示了如何使用目标选择器来让一个弹出框在单击一个按钮后出现。在这个例子中，“pop-up”元素被设置为“display:none”（即隐藏），并且包含一个带有“#close”的链接，点击该链接将关闭弹出框。当用户单击“打开弹出框”按钮时，页面将滚动到“pop-up”元素，并且根据目标选择器的规则，该元素会显示出来。

导航栏样式

<nav>
    <a href="#home">主页</a>
    <a href="#about">关于</a>
    <a href="#contact">联系方式</a>
</nav>

<div id="home">
    <h1>欢迎来到我们的网站！</h1>
</div>

<div id="about">
    <h2>我们是谁？</h2>
    <p>我们是一个伟大的团队，希望为您提供最好的服务。</p>
</div>

<div id="contact">
    <h2>联系我们</h2>
    <p>请填写以下表格，以便我们联系您。</p>
</div>

<style>
    :target {
        background-color: #efefef;
    }

    nav a:focus {
        background-color: yellow;
    }
</style>

这个示例展示了如何使用目标选择器来为导航栏的链接应用样式。当导航栏的链接被单击时，与目标匹配的元素（例如，“home”，“about”或“contact”）将呈现为浅灰色背景。

同时，当导航栏的链接获得焦点时，该链接将呈现出黄色背景。

结论

目标选择器可以帮助您轻松应用CSS样式，使您的页面更加动态和有吸引力。使用目标选择器，可以在单击链接时自动滚动到相应的位置，并且对于许多常见的网页效果（如弹出框）也非常有用。