CSS :target 选择器教程

栏目： CSS3 发布时间：2024-11-01

CSS 的 :target 选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时 :target 选择器就可以用来选择并应用样式到这个元素上。

基本用法

定义目标元素：你需要有一个或多个目标元素，通常通过ID来标识。例如：
```
<div id="target1">这是目标1</div>
<div id="target2">这是目标2</div>
```
创建链接：在页面上创建链接，使它们指向这些目标元素。例如：
```
<a href="#target1">前往目标1</a>
<a href="#target2">前往目标2</a>
```
应用样式：使用 :target 选择器为目标元素应用样式。例如：
```
#target1:target {
    background-color: yellow;
}
#target2:target {
    color: red;
}
```
当用户点击链接 #target1 时，ID 为 target1 的元素将会应用背景颜色为黄色的样式；当用户点击链接 #target2 时，ID 为 target2 的元素将会应用文字颜色为红色的样式。

高级用法

结合其他选择器： :target 选择器可以与其他选择器结合使用。例如，如果你有一个包含多个目标元素的容器，你可以为这些目标元素应用特定的样式：

<div class="container">
    <div id="section1" class="section">这是部分1</div>
    <div id="section2" class="section">这是部分2</div>
</div>

.section:target {
    border: 2px solid blue;
}

创建Tab导航： :target 选择器常用于创建Tab导航。例如：

<nav>
    <a href="#tab1">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
</nav>
<div id="tab1" class="tab-content">Content for Tab 1</div>
<div id="tab2" class="tab-content">Content for Tab 2</div>
<div id="tab3" class="tab-content">Content for Tab 3</div>

.tab-content {
    display: none; /* 默认隐藏所有tab内容 */
}
.tab-content:target {
    display: block; /* 当tab内容被选中时，显示该内容 */
}

注意事项

URL 刷新：:target 选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。
浏览器支持：大多数现代浏览器（如Firefox、Chrome、Safari）都支持 :target 选择器，但IE8及以下的IE版本不支持，IE9及以上版本支持。

示例代码

下面是一个完整的示例，展示了如何使用 :target 选择器来创建一个简单的Tab导航：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :target 示例</title>
    <style>
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        .tab-content:target {
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#tab1">Tab 1</a>
        <a href="#tab2">Tab 2</a>
        <a href="#tab3">Tab 3</a>
    </nav>
    <div id="tab1" class="tab-content">
        <h2>Tab 1 内容</h2>
        <p>这是Tab 1的内容。</p>
    </div>
    <div id="tab2" class="tab-content">
        <h2>Tab 2 内容</h2>
        <p>这是Tab 2的内容。</p>
    </div>
    <div id="tab3" class="tab-content">
        <h2>Tab 3 内容</h2>
        <p>这是Tab 3的内容。</p>
    </div>
</body>
</html>

在这个示例中，当用户点击导航链接时，对应的Tab内容将会显示出来，而其他Tab内容则会被隐藏。

希望这篇教程能帮助你更好地理解和使用CSS的 :target 选择器。

本文地址：https://www.tides.cn/p_css3-target

CSS :target 选择器教程

基本用法

高级用法

注意事项

示例代码

推荐阅读