CSS 默认 :target 伪类

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 中的默认 :target 伪类。:target 伪类用于选择当前活动的锚点（也称为页面内链接）。通过为锚点添加样式，可以为用户提供有关所选链接的视觉反馈。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是锚点？

锚点是 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 中的一个元素，它通过在 href 属性中设置一个标识符来与相应的目标元素进行关联。例如，以下代码段中的链接将在单击后将页面滚动到具有 id=”section1″ 的元素。

<a href="#section1">跳转到第一节</a>

默认 :target 伪类的使用

默认情况下，当页面中的锚点被单击时，浏览器会自动为该元素应用 :target 伪类。我们可以通过为 :target 伪类选择器设置特定的样式来改变活动的元素的外观。

:target {
  background-color: yellow;
  color: red;
}

在上面的示例中，当用户单击页面上的锚点链接时，目标元素的背景颜色将更改为黄色，并且文本颜色将更改为红色。这样，用户就可以直观地知道他们正在查看的部分。

示例

让我们通过一个实际的示例来说明如何使用默认 :target 伪类。考虑以下 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 代码：

<a href="#section1">第一节</a>
<a href="#section2">第二节</a>
<a href="#section3">第三节</a>

<div id="section1">
  <h2>第一节标题</h2>
  <p>第一节内容</p>
</div>

<div id="section2">
  <h2>第二节标题</h2>
  <p>第二节内容</p>
</div>

<div id="section3">
  <h2>第三节标题</h2>
  <p>第三节内容</p>
</div>

现在，我们可以为 :target 伪类选择器设置一些样式，以突出显示当前活动的锚点链接和对应的目标元素。以下是一个示例 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS：

:target {
  background-color: yellow;
  color: red;
}

:target h2 {
  font-size: 24px;
}

:target p {
  font-weight: bold;
}

当用户单击页面上的锚点链接时，相应的目标元素将突出显示，标题将增大到 24px，并且段落文本将变为粗体。

使用 CSS 默认 :target 伪类，我们可以轻松地为页面锚点添加视觉效果，使用户获得更好的体验。

总结

在本文中，我们介绍了 CSS 中的默认 :target 伪类，它用于选择当前活动的页面内链接。通过为锚点添加样式，我们可以为用户提供有关所选链接的视觉反馈。我们还通过示例说明了如何使用该伪类，并为其设置样式。希望本文能帮助您更好地理解和应用 CSS 中的默认 :target 伪类。