CSS的:target伪类：动态URL定位样式的指南

杨哥带你写代码

于 2024-08-18 23:12:09 发布

阅读量201

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_85339615/article/details/141307371

版权

CSS的:target伪类是一种强大的工具，它允许开发者根据URL的锚点（即页面内某个元素的ID）来改变对应元素的样式。这在创建可滚动的页面、文章目录跳转、或任何需要通过URL直接指向页面特定部分的场景中非常有用。本文将详细介绍:target伪类的使用，并提供代码示例。

1. CSS伪类概述

伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。:target伪类则用于选择当前URL中指向的元素。

2. 使用:target伪类

:target伪类可以应用于页面中任何具有ID的元素，当该元素的ID与URL中的锚点匹配时。

/* 改变URL指向的元素的背景色 */
#section1:target {
  background-color: yellow;
}

3. :target伪类的工作原理

:target伪类的选择基于浏览器的地址栏中的URL。如果URL包含一个锚点（如#section1），:target伪类会选择对应的元素并应用样式。

4. 基本示例

假设你有一个页面，并且想通过URL的锚点来高亮显示特定的部分。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Target Demo</title>
<style>
  /* 初始的section样式 */
  section {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
  }

  /* 当section是URL锚点时的样式 */
  section:target {
    border-color: red;
  }
</style>
</head>
<body>

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<!-- 更多内容 -->

<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

</body>
</html>