CSS 伪类选择器:target的使用

引言

在Web开发中，CSS是一种重要的样式语言，通过CSS样式，我们可以为HTML元素添加各种各样的样式效果，从而美化页面，提升用户体验。而CSS伪类选择器就是其中之一，它可以让我们选择页面上特定状态的元素，并为其应用不同的样式。

本文将重点介绍CSS伪类选择器中的:target伪类选择器，它用于选择当前活动的目标元素，以及如何使用它来实现一些有趣的效果。

什么是`:target`伪类选择器

在CSS中，:target伪类选择器用于选择当前活动的目标元素。目标元素通常是由页面URL的锚点（即#后的部分）指示的元素。当我们点击带有锚点的链接时，URL中的锚点将被浏览器解析，并且相应的目标元素将获得:target伪类选择器的样式。

基本语法如下：

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

使用`:target`伪类选择器

为点击链接时的目标元素添加特定样式

首先看一个简单的例子，我们有一个页面，其中有一个带有锚点的链接和一个相应的目标元素。当我们点击链接时，目标元素应用某种样式。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        #target {
            background-color: #f7f7f7;
            padding: 20px;
            margin-bottom: 20px;
        }

        #target:target {
            background-color: #ffcccc;
        }
    </style>
</head>
<body>
    <a href="#target">点击我</a>
    <div id="target">
        这是一个示例目标元素。
    </div>
</body>
</html>

运行以上代码，我们点击链接时，目标元素的背景颜色将改变为粉色。

创建一个基于`:target`伪类选择器的选项卡效果

使用:target伪类选择器，我们还可以创建一个简单的选项卡效果。当我们点击选项卡标题时，相应的内容区域将显示。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .tab {
            display: none;
            padding: 20px;
        }

        .tab:target {
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#tab1">选项卡1</a></li>
        <li><a href="#tab2">选项卡2</a></li>
        <li><a href="#tab3">选项卡3</a></li>
    </ul>

    <div id="tab1" class="tab">
        这是选项卡1的内容。
    </div>
    <div id="tab2" class="tab">
        这是选项卡2的内容。
    </div>
    <div id="tab3" class="tab">
        这是选项卡3的内容。
    </div>
</body>
</html>

运行以上代码，我们点击选项卡标题时，相应的内容区域将显示。

结合`:target`伪类选择器和`:hover`伪类选择器实现鼠标悬停效果

我们还可以结合:target伪类选择器和:hover伪类选择器，实现一个鼠标悬停效果。当我们悬停在目标元素上时，它的颜色将改变，当我们点击目标元素时，它的颜色将保持不变。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        #target {
            background-color: #f7f7f7;
            padding: 20px;
            transition: background-color 0.3s;
        }

        #target:hover,
        #target:target {
            background-color: #ffcccc;
        }
    </style>
</head>
<body>
    <div id="target">
        这是一个示例目标元素。
    </div>
</body>
</html>

运行以上代码，我们将看到目标元素的颜色在鼠标悬停和点击时发生了变化。

延伸应用：模态框

:target伪类选择器还可以用于创建模态框（Modal）效果，这是一种常见的用户界面设计，它在当前页面上弹出一个覆盖层，并显示一些内容。

以下是一个简化的模态框示例：

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .modal:target {
            display: block;
        }

        .modal-content {
            background-color: #fff;
            width: 300px;
            height: 200px;
            margin: 100px auto;
            padding: 20px;
            border-radius: 5px;
        }

        .close {
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <a href="#myModal">打开模态框</a>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="location.href='#'">×</span>
            <h1>模态框标题</h1>
            <p>这是模态框的内容。</p>
        </div>
    </div>
</body>
</html>

运行以上代码，我们点击”打开模态框”链接时，将弹出一个模态框，点击模态框右上角的”×”按钮或背景区域将关闭模态框。